利用canvas画出动态时钟

最近在学习html5，其中的canvas显得尤为重要，能够实现很多功能，画出很多漂亮的东西，下面记录一下我学到的第一个canvas实例：利用canvas画出时钟。
该时钟是一个动态的图，能够显示当前的时间。
**首先我们要知道它的基本思路**：如何画出时钟上的数字，以及时针，分针，秒针，接下来的时钟的圆弧我们可以直接用HTML5的API函数画出即可。

**弧度=弧长/半径，**一个圆的弧长为2πR，角度为360°，可以得出：**1度的弧长=2πr/360，1度的弧度=2π/360**。
下面来画一个圆：定义画布标签并在js中获取这个画布，随后定义一个函数：drawBackground：

window.onload=function()
{
var can=document.getElementById('myCanvas');
var ctx=can.getContext('2d');
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width*0.5;
var rem=width/200;

function drawBackground()
{   ctx.save();
ctx.translate(r,r);//改变图形的中心点为画布的中心点
ctx.font= 18*rem + 'px Arial';//设置字体大小
ctx.textAlign='center';//设置文本的对齐方式
ctx.textBaseline='middle';//设置文本的基准线
ctx.beginPath();
ctx.lineWidth=4*rem;//设置文本的线宽
ctx.arc(0,0,r-ctx.lineWidth,0,Math.PI*2,false);//画圆
ctx.stroke();
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];//定义数组存放时钟上的12个数字

hourNumbers.forEach(function(number,i)//遍历这个数组
{  var rad=2*Math.PI/12*i;       //设置弧度
var x=Math.cos(rad)*(r-30*rem);//设置数字的坐标
var y=Math.sin(rad)*(r-30*rem);
ctx.fillText(number,x,y);

});
for(var i=0;i<60;i++)//设置秒点
{
var rad=2*Math.PI/60*i;//设置间隔的弧度
var x=Math.cos(rad)*(r-18*rem);//设置点的坐标
var y=Math.sin(rad)*(r-18*rem);
ctx.beginPath();
if(i%5===0)//如果这个点对应数字

{
ctx.fillStyle='#000';//填充黑色

ctx.arc(x,y,2*rem,0,2*Math.PI,false);//画圆

}
else
{
ctx.fillStyle='#ccc';//填充灰色
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill();

}
}

运行结果如下：



接下来我们来画时钟上的针：定义函数drawHour，drawMinute，drawSecond：

function drawHour(hour,minute)
{
ctx.save();
ctx.beginPath();
ctx.lineWidth=6*rem;
var rad=2*Math.PI/12*hour;//设置时针弧度

var mrad=2*Math.PI/12/60*minute; //设置分针的弧度
ctx.rotate(rad+mrad);//把两个弧度相加能够实现例如4:30，时针指向4,5之间，而不是指向4
ctx.lineCap="round";//设置顶端的样式为圆形的弧度
ctx.moveTo(0,10*rem);//画针
ctx.lineTo(0,-r/2);//时针的长度为半径的一般
ctx.stroke();
ctx.restore();

}

function drawMinute(minute)
{
ctx.save();
ctx.beginPath();
ctx.lineWidth=3*rem;
var rad=2*Math.PI/60*minute;
ctx.lineCap="round";

ctx.rotate(rad);
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+36*rem);
ctx.stroke();
ctx.restore();

}

function drawSecond(second)
{
ctx.save();
ctx.beginPath();
ctx.lineWidth=3*rem;
ctx.fillStyle="red";
var rad=2*Math.PI/60*second;
ctx.rotate(rad);
ctx.moveTo(-2*rem,20*rem);
ctx.lineTo(2*rem,-r+18*rem);
ctx.lineTo(1,-r+16*rem);
ctx.lineTo(-1,-r+16*rem);
ctx.fill();
ctx.restore();

}

最后画一个白色的中心圆点把针都固定起来，添加函数drawDot：

function drawDot()
{
ctx.save();
ctx.beginPath();
ctx.arc(0,0,3*rem,0,Math.PI*2);
ctx.fillStyle="white";
ctx.fill();
ctx.restore();
}

到此我们实现了时钟的静态效果，假设时间为4:30，15秒，效果图如下：

drawBackground();
drawHour(4,30);
drawMinute(30);
drawSecond(15);
drawDot();

接下来我们来实现时钟的动态效果，让它获取当前的时间，并让它的时针都动起来，我们建立函数draw：

function draw()
{  ctx.clearRect(0,0,width,height) ;//清楚画布内容，否则会发生针的位置不会刷新
var now = new Date();//获取当前时间
var Hour=now.getHours();
var Minute=now.getMinutes();
var Second=now.getSeconds();
drawBackground();//获取背景

drawHour(Hour,Minute);//调用函数画出时针
drawMinute(Minute);
drawSecond(Second);
drawDot();
ctx.restore();

}
draw();
setInterval(draw,1000);//设置一个定时器，让它一秒执行一次draw函数，可以实现动态效果

最后我们还要注意一点，改变画布的宽高，会导致比例失调，为此我们在函数开始时定义了一个比例变量rem，

var rem=width/200;

在每个设置大小的变量后面都乘以rem这样，放大画布时钟也不会失真。

last but not least希望能够帮助到你们，让我们一起努力~~