canvas动画时钟

在html代码中，插入canvas标签

<canvas id="dialCanvas"></canvas><canvas id="handCanvas"></canvas>

设置canvas的css样式

        position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);

写入了两个画布，一个是为了画静态的表盘，另一个是为了画动态的指针

在js中创建画布，进行相关的初始化设置

var width = 600;  var height = 600;var dialRadius = 200; //表盘半径var cx = width / 2;var cy = height / 2;//获取canvasvar dialCanvas = document.getElementById("dialCanvas");var handCanvas = document.getElementById("handCanvas");//设置画布大小dialCanvas.width = width;dialCanvas.height = height;handCanvas.width = width;handCanvas.height = height;//获取绘图环境var dialCxt = dialCanvas.getContext("2d");var handCxt = handCanvas.getContext("2d");

绘制表盘

dialCtx.beginPath();dialCtx.arc(dialX,dialY,dialRadius,0,Math.PI*2);dialCtx.lineWidth=10;dialCtx.stroke();

下面要绘制表盘的刻度，我们把它封装成一个函数

各个参数的含义

  /** 
*绘制刻度的函数
@param object ctx
@param number cx 圆心x坐标
@param number cy 圆心y坐标
@param number inenrRadius 内半径
@param number outerradius 外半径
@param string stroke 刻度颜色
@param number strokeWidth  刻度宽度
@param number numScales 刻度数量
 */

  function drawScale(ctx,cx,cy,outerRadius,innerRadius,scaleCount,scaleWidth,scaleColor){ctx.beginPath();var angle=0;var changeAngle=Math.PI*2/scaleCount;for(var i=0;i<scaleCount;i++){var x1=Math.cos(angle)*outerRadius+cx;var y1=Math.sin(angle)*outerRadius+cy;var x2=Math.cos(angle)*innerRadius+cx;var y2=Math.sin(angle)*innerRadius+cy;ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);angle+=changeAngle;}ctx.strokeStyle=scaleColor;ctx.lineWidth=scaleWidth;ctx.stroke();}

1、绘制小时的刻度

drawScale(dialCtx, dialX, dialY, dialRadius, dialRadius-20, 12, 10, "#000");

2、绘制分钟的刻度

drawScale(dialCtx, dialX, dialY, dialRadius, dialRadius-10, 60, 5, "#000");

表盘大致画好了，刻度也画好了，接下来就是绘制指针并让它指向正确的时间，是不是？不就就是画一条直线么。关键是指针rotate的角度是多少呢？其实也是比较简单的。获取当前的时间就好了。

先封装画指针的函数吧

各个参数的含义

/**
* 绘制指针
* @params object ctx
* @params number cx 表盘圆心坐标
* @params number cy 表盘圆心坐标
* @params number angle 旋转的度数(弧度)
* @params number handLength 指针长度
* @params string stroke 指针颜色
* @params number strokeWidth 指针粗细度   

*/

 function drawHand(ctx, cx, cy, angle, handWidth, handLength, handColor){ctx.save();ctx.translate(cx,cy);ctx.rotate((angle-90)/180*Math.PI);ctx.beginPath();ctx.moveTo(-20,0);ctx.lineTo(handLength,0);ctx.strokeStyle=handColor;ctx.lineWidth=handWidth;ctx.stroke();ctx.restore();}

定义一个定时函数让指针能动起来

 function runTime(){//获取当前时间var date = new Date();var s = date.getSeconds();var m = date.getMinutes() + s / 60;var h = date.getHours() + m / 60;//清除屏幕handCxt.clearRect(0,0,width,height);//绘制秒针drawHand(handCxt, cx, cy, s / 60 * Math.PI * 2, 180, "red", 2);//绘制分针drawHand(handCxt, cx, cy, m / 60 * Math.PI * 2, 150, "#000", 5);//绘制时针drawHand(handCxt, cx, cy, h / 12 * Math.PI * 2, 120, "#000", 8);setTimeout(runTime, 1000);}

调用定时函数

runTime();