• 前言

Html5添加的最受欢迎的功能就是<canvas>元素，它负责在页面中设定一个区域，然后在里面可以通过javascript动态地在其内绘制图形。

主流浏览器，IE9+，手机端都是支持它的。

  • 创建Canvas

要使用Canvas元素就必须先设置其width和height，指定绘图区域的大小

类似：<canvas id="canvas" width="800" height="800"/>

如果要在这块画布上绘图的话，首先要取得绘图上下文,需调用getContext（）方法

var canvas=document.getElementById("canvas");

//判断浏览器是否支持canvas

if(canvas.getContext)

{   var draw=canvas.getContext("2d");//这里2d  取得2d上线文对象，还有一个WebGL的3D上下文（还未接触过，不在此陈诉了）

}

我们用2d上下文可以绘制简单的2d图形，如矩形，弧线。

  • 利用Canvas创建曲线运动

这里有个demo是曲线运动，直接上代码

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset=gbf>

 <title>曲线运动</title>

 <script>

 //box

 var box_x=0;

 var box_y=0;

 var box_width=500;

 var box_height=500;

 //ball

 var ball_x=10;

 var ball_y=10;

 var ball_radius=10;

 var ball_vx=10;

 var ball_vy=0;

 //constant

 var g=10;//note

 var rate=0.9;

 //bound

 var bound_left=box_x+ball_radius;

 var bound_right=box_x+box_width-ball_radius;

 var bound_top=box_y+ball_radius;

 var bound_bottom=box_y+box_height-ball_radius;

 //context

 var ctx;

 function init()

 {

 ctx=document.getElementById('canvas').getContext('2d');

 //

 ctx.lineWidth=ball_radius;

 //设置球的颜色

 ctx.fillStyle="rgb(200,0,50)";

 move_ball();

 setInterval(move_ball,100);

 } 

 function move_ball()

 {

 //清除画布上的矩形区域

 ctx.clearRect(box_x,box_y,box_width,box_height);

 move_and_check();

 //开始曲线路径

 ctx.beginPath();

 //绘制圆球

 ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);

 //fillstyle填充

 ctx.fill();

 //绘制指定矩形

 ctx.strokeRect(box_x,box_y,box_width,box_height);

 } 

 function move_and_check()

 {

 var cur_ball_x=ball_x+ball_vx;

 var temp=ball_vy;

 ball_vy=ball_vy+g;

 var cur_ball_y=ball_y+ball_vy+g/2;

 if(cur_ball_x<bound_left)

 {

 cur_ball_x=bound_left;

 ball_vx=-ball_vx*0.9;

 ball_vy=ball_vy*0.9;

 }

 if(cur_ball_x>bound_right)

 {

 cur_ball_x=bound_right;

 ball_vx=-ball_vx*0.9;

 ball_vy=ball_vy*0.9;

 }

 if(cur_ball_y<bound_top)

 {

 cur_ball_y=bound_top;

 ball_vy=-ball_vy*0.9;

 ball_vx=ball_vx*0.9;

 }

 if(cur_ball_y>bound_bottom)

 {

 cur_ball_y=bound_bottom;

 ball_vy=-ball_vy*0.9;

 ball_vx=ball_vx*0.9;

 }

 ball_x=cur_ball_x;

 ball_y=cur_ball_y;

 }

 </script>

 </head>

 <body onLoad="init()">

 <canvas id="canvas" width="800" height="800"/>

 </body>

 </html>

代码中包含了少部分2D上下文API。详细API请参考：

http://www.w3school.com.cn/html5/html_5_canvas.asp;

http://blog.teamtreehouse.com/getting-started-with-the-canvas-api

http://javascript.ruanyifeng.com/htmlapi/canvas.html

  • 最后

很多css3不能表现的复杂动画，通过canvas，js来配合解决是极好的，当然这里面还有很多东西，这里小小记录下canvas的一下基本用法。

Canvas实现曲线运动的更多相关文章

  1. html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  3. canvas高级动画示例

    canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...

  4. 使用JavaScript和Canvas实现下雪动画效果

    该下雪动画效果使用了HTML5中Canvas画布实现,其中涉及了物理学中曲线运动的相关知识与运算. index.html <!DOCTYPE html> <html lang=&qu ...

  5. canvas动画：气泡上升效果

    HTML5中的canvas真是个很强大的东西呢! 这几天突发奇想想做一个气泡上升的动画,经过许久的思考和多次失败,终于做出了如下效果 由于是录制的gif图,看着会有点卡顿,实际演示是很自然的 想要做出 ...

  6. js数学公式-曲线运动

    ---勾股定理 a*a + b*b =c*c ---三角函数 正弦 : sin 余弦 : cos 正切 : tan 余切 : cot 正弦定理 a/sinA = b/sinB =c/sinC = 2r ...

  7. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  8. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  9. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

随机推荐

  1. C#调用C++函数入口点的问题 z

    C++使用 void extern __declspec(dllexport) 函数名()定义的输出函数, 在C#中调用时, 如前文所述, 使用 [DllImport("D:\VS2005P ...

  2. HDU-1240 Asteroids! （BFS）这里是一个三维空间，用一个6*3二维数组储存6个不同方向

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  3. 应用程序连接oracle rac

    10g rac vip漂移的目的不是让client不加改变的连接过来而是让client尽快收到一个连接终止的包,然后由client去连接tnsnames中配置的下一个地址.和没有vip相比, 使用vi ...

  4. oracle 中的truncate 和delete

    一.查询表大小,块多少语句 Select SEGMENT_Name,BYTES,BLOCKS,Extents From dba_segments Where segment_name In('BAI_ ...

  5. normalization归一化

    简单的举个例子:一张表有两个变量,一个是体重kg,一个是身高cm.假设一般情况下体重这个变量均值为60(kg),身高均值为170(cm).1,这两个变量对应的单位不一样,同样是100,对于身高来说很矮 ...

  6. SRM144 - SRM 148(少144-DIV1-LV3，147-DIV2-LV3)

    SRM 144 DIV 1 500pt tag:组合 题意:彩票中奖.给定n, m,从1-n中选择m个数组成数列a1, a2, a3...am.对于数列{am}分别满足以下条件的概率: (1)数列所有 ...

  7. .Net设计模式_开篇

    前言 其实以前看过两次设计模式,现在想来,几乎已经对设计模式没有任何印象,说明根本没有理解.或者说几乎不用,所以我除了单列.工厂外的设计模式几乎全部忘记了.最近需要写一个引擎,想用UML设计整体的架构 ...

  8. Oracle数据库启动流程

    1.oracle也可以通过命令的方式启动, (1)oracle启动流程-windows下 1) lsnrctl start (启动监听) 2)oradim -startup -sid 数据库实例名 2 ...

  9. CoreLocation框架的使用

    CoreLocation框架使用 一.地图和定位的简介 1.应用场景 周边:找餐馆/找KTV/找电影院(团购APP) 导航:根据用户设定的起点和终点,进行路线规划,并指引用户如何到达(地图APP) 2 ...

  10. SQLite 入门教程（一）基本控制台（终端）命令 （转）

    转于: SQLite 入门教程(一)基本控制台(终端)命令 一.基本简介   SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所 ...