1.清除Canvas的内容
clearRect(x,y,width,height)函数用于清除图像中指定矩形区域的内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.9.1.html</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(0,0,400,200);
ctx.clearRect(50,50,150,100);
</script>
</body>
</html>
显示：
2.创建动画
步骤1：指定坐标点（100,100）为圆心，绘制半径为0的圆；
步骤2：间隔10秒后，清除之前绘制的图形；
步骤3：再次以坐标点（100,100）为圆心，绘制半径为1的圆，依次类推，直到圆的半径等于100；
步骤4：以（100,100）为圆心，绘制半径99的圆，依次类推，直到圆的半径等于0；
步骤5：然后再增加圆的半径，这样让动画往返运动；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas> <!--每10毫秒重新绘制一次图形-->
<button onclick="tt=setInterval(action ,10);">开始</button>
<button onclick="clearInterval(tt);">停止</button> <script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var dir=0;
var width=500;
var height=500;
var per=1; //每次增加的半径值
function action(){
ctx.clearRect(0,0,width,height);
ctx.fillStyle="red"; //设置颜色
ctx.beginPath(); //开始新的绘画
ctx.arc(260,260,dir,0,Math.PI*2);//绘制圆
ctx.closePath(); //结束画布
ctx.fill(); //结束渲染
dir=dir+per;
if(dir==0 || dir==height/2){ //判断圆半径的大小
per=per*-1; //往相反的方向运动
}
} </script>
</body>
</html>
显示：