JavaSript及HTML5CANVAS实现钟表动画的讲解

用HTML5及JavaScript实现钟表的动画时，关键的地方是save和restore的恰当应用。
闲言少叙，直接上代码
可以在里插入属性:

注意setInterval引用的是函数名。。

```javascript function myFun(){ clock(); setInterval(clock,1000); //每间隔一秒调用一次； } function clock(){ var mycan = document.querySelector("#myCanvas"); var ctx = mycan.getContext('2d'); ctx.save(); //**第一个save; 这个必须保存，否则在setInterval的下一次调用时，会在以前的context基础上进行。**

  ctx.clearRect(0,0,600,400);
  ctx.translate(300,200);
  ctx.rotate(-1*Math.PI/2);
  ctx.strokeStyle="red";
	ctx.fillStyle = "red";
  ctx.save();  //第二个save();必须保存
	ctx.beginPath();     //必须有,否则会以后续的troke或则fill的特性绘制路径.
	ctx.arc(0,0,5,0,2*Math.PI);
	ctx.fill();
	ctx.beginPath();  //想改变图形而特征,必须有这个,否则后续以最后设置的特性绘制;
	for(let i = 0;i < 12 ;i++){
		
		ctx.rotate(Math.PI/6);
		ctx.moveTo(0,100);
		ctx.lineTo(0,120);
		ctx.stroke(); //在documeng上绘制已经构建完成的路径;
	}
	
	  ctx.restore(); //将第二个save调出来; 桟里不再用第二个save保存的特性.必须,消除上一个路径的影响
	  ctx.save(); //必须,重新将第二个特性压入桟......
	  ctx.beginPath();
	 ctx.strokeStyle="green";
	 for(let j = 0;j<60;j++){
		if(j %5 !== 0){
			ctx.moveTo(0,104);
			ctx.lineTo(0,116);
			ctx.stroke();
		}
		ctx.rotate(Math.PI/30);
	}
	ctx.restore();//将第二个save调出来; 桟里不再用第二个save保存的特性.必须,消除上一个路径的影响
	
	ctx.save();//必须,重新将第二个特性压入桟......
	//以下代码画指针:时针、分针、秒针;
	var time = new Date();
	var hr = time.getHours();
	var min = time.getMinutes();
	var sec = time.getSeconds();
	
    //画时针
	ctx.lineWidth = 6;
	ctx.beginPath();
	ctx.rotate(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
	ctx.moveTo(0,0);
	ctx.lineTo(80,0);
	ctx.stroke();
	
	ctx.restore();//将第二个save调出来; 桟里不再用第二个save保存的特性.必须,消除上一个路径的影响
	ctx.save(); //必须,重新将第二个特性压入桟......
	//画分针
	ctx.beginPath();
	ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*sec);
	ctx.moveTo(0,0);
	ctx.lineTo(98,0);
	ctx.stroke();
	
	ctx.restore();//将第二个save调出来; 桟里不再用第二个save保存的特性.必须,消除上一个路径的影响
	ctx.save(); //必须,重新将第二个特性压入桟......
	//画秒针
	ctx.beginPath()
	ctx.rotate(Math.PI/30 * sec);
	ctx.moveTo(0,0);
	ctx.lineTo(120,0);
	ctx.stroke();
	ctx.restore(); //将第二个save调出来; 桟里不再用第二个save保存的特性
	
	ctx.restore();//将第一个save调出来; 桟里不再用第一个save保存的特性,可以不调.
	ctx.font= "30px Arial";
	ctx.fillText(hr+":"+min+":"+sec,240,240);
	
}