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>
显示：