您的位置：首页 > 其它

用Canvas实现动画效果

2017-01-03 20:26 525 查看

1.清除Canvas的内容

clearRect(x,y,width,height)函数用于清除图像中指定矩形区域的内容

1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>4.9.1.html</title>
6 </head>
7 <body>
8 <canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas>
9 <script type="text/javascript">
10     var c=document.getElementById("myCanvas");
11     var ctx=c.getContext("2d");
12     ctx.fillStyle="blue";
13     ctx.fillRect(0,0,400,200);
14     ctx.clearRect(50,50,150,100);
15 </script>
16 </body>
17 </html>

显示：

2.创建动画

步骤1：指定坐标点（100,100）为圆心，绘制半径为0的圆；

步骤2：间隔10秒后，清除之前绘制的图形；

步骤3：再次以坐标点（100,100）为圆心，绘制半径为1的圆，依次类推，直到圆的半径等于100；

步骤4：以（100,100）为圆心，绘制半径99的圆，依次类推，直到圆的半径等于0；

步骤5：然后再增加圆的半径，这样让动画往返运动；

1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4     <meta charset="UTF-8">
5     <title></title>
6 </head>
7 <body>
8     <canvas id="myCanvas" width="500" height="500"></canvas>
9
10     <!--每10毫秒重新绘制一次图形-->
11     <button onclick="tt=setInterval(action ,10);">开始</button>
12     <button onclick="clearInterval(tt);">停止</button>
13
14     <script type="text/javascript">
15         var canvas=document.getElementById("myCanvas");
16         var ctx=canvas.getContext("2d");
17         var dir=0;
18         var width=500;
19         var height=500;
20         var per=1;                           //每次增加的半径值
21         function action(){
22             ctx.clearRect(0,0,width,height);
23             ctx.fillStyle="red";           //设置颜色
24             ctx.beginPath();                 //开始新的绘画
25             ctx.arc(260,260,dir,0,Math.PI*2);//绘制圆
26             ctx.closePath();                 //结束画布
27             ctx.fill();                      //结束渲染
28             dir=dir+per;
29             if(dir==0 || dir==height/2){   //判断圆半径的大小
30                 per=per*-1;                 //往相反的方向运动
31             }
32         }
33
34     </script>
35 </body>
36 </html>

显示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航