说明：作为canvas初学者，好多知识都还没来得及深入了解，写下特效实现的梗概，谨以此纪念自己的第一次canvas 实践
时光机
-
什么是canvas
canvas 是html5 新增的一个利用js脚本绘制位图的标签，canvas 标签作为画布，本身不具有绘图的能力，而是依赖其对应的上下文对象【利用getContext()方法取得,以下简称‘canvas对象’】的一组API来实现。
-
canvas的应用场景
canvas 对象常用于图标绘制，小游戏，活动页面，小特效等。
-
时钟特效
实现过程可以分为三个步骤：绘制钟面，绘制指针指向，利用setInterval()循环调用绘制方法.
绘制钟面 ：通过moveTo()方法，指定路径的起点，再利用arc()方法分别绘制度数为6和30的弧，再循环绘制，绘制出钟面
绘制指针指向：创建一个时间对象，求出当前时间的时、分、秒，再利用moveTo与arc()方法绘制指针【注意：arc中当起始弧度与结束弧度相同时，可以绘制直线】
setInterval()循环调用：设置间隔时间为1秒，循环绘制图像
/*绘制分针刻度线,时针与分针实现思路相同,只需要每次递增30度*/
var num=0;
for(var i=0;i<60;i++){
ndCanvas.moveTo(250,250);
ndCanvas.arc(250,250,180,num*Math.PI/180,(num+6)*Math.PI/180,false);
ndCanvas.stroke();
num+=6;
}
ndCanvas.beginPath();
ndCanvas.save();
ndCanvas.fillStyle='#fff';
ndCanvas.arc(250,250,170,0,2*Math.PI,false)
ndCanvas.fill();
ndCanvas.restore();
/*注意arc()方法的起始点在3点钟位置,所以绘制路径时,将起始位置,逆时针旋转90度,调整为以0点钟作为方向*/
var time=new Date();
var hours=time.getHours();
var minS=time.getMinutes();
var secS=time.getSeconds();
//分针指向(时针和秒针实现思路相同)
ndCanvas.beginPath();
ndCanvas.save();
ndCanvas.lineWidth=4;
ndCanvas.moveTo(250,250);
ndCanvas.arc(250,250,130,(minS*6-90)*Math.PI/180,(minS*6-90)*Math.PI/180,false);
ndCanvas.stroke();
ndCanvas.restore();
/*循环绘制[每次重新绘制前,都需要用clearRect()方法清除画布]*/
function startDraw(){
timeCode = setInterval(function(){
timer();
},1000);
}
