Canvas实例——绘制时钟

最近正在学习h5的canvas元素，并看到一个很好的例子，在这里总结后分享给大家。首先canvas是h5中新增的元素，使用canvas可以在页面上绘制出任何需要的、非常漂亮的图片和图像，制作出丰富多彩的web页面。知道Canvas作用后，下面就来介绍这个例子，效果图如下：



首先我们定义canvas元素作为画布，大小设定为300*300px，代码如下：

<div class="box">
<canvas id="canvas" width="300px" height="300px"></canvas>
</div>

接下来介绍的主要是 JavaScript代码，我们通过getElementById()方法获取该canvas元素，代码如下：

var canvas = document.getElementById("canvas");//通过id获取canvas元素
var ctx = canvas.getContext('2d');

我们在这里先设置图形的组合方式是destination-over，即为原有图形之下绘制图形，主要为了后面加入劳力士图标的图片，代码如下：

ctx.globalCompositeOperation='destination-over';

为了使时钟能够动起来，我们使用js里的固有方法setInterval方法用于设置动画的时间间隔，1000即为一秒。

setInterval(run,1000);

实例化时间对象，获取系统的时分秒，代码如下：

var time = new Date();//获取现在时间
var sec = time.getSeconds();//获取秒
var min = time.getMinutes();//获取分钟
var hour = time.getHours();//获取小时
hour = hour>12 ? hour-12 : hour;

接下来我们绘制时间间隔，代码如下，需要特别说明的是save()和restore()方法，它们分别是用来保存和恢复canvas状态的，在需要保存与恢复当前状态时，首先调用save方法将当前状态保存到栈中，在完成设置的操作后，再调用restore从栈中取出之前保存的图形上下文的状态进行恢复。关于save()和restore()具体定义和用法，请点击这里查看，绘制时间间隔代码如下：

ctx.clearRect(0,0,300,300);//清除画布
ctx.save();
ctx.translate(150,150);//x平移+150,y平移+150
for(var i=0; i<60; i++){//绘制时间间隔，每隔5个绘制大的，其他绘制小的
if(i%5 == 0){
ctx.beginPath();
ctx.moveTo(0,120);
ctx.lineTo(0,130);
ctx.lineWidth = 5;
ctx.strokeStyle = "#000010";
ctx.stroke();
ctx.rotate(Math.PI/30);
}else{
ctx.beginPath();
ctx.moveTo(0,120);
ctx.lineTo(0,126);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.rotate(Math.PI/30);
}

}
ctx.restore();

绘好时间间隔之后，我们加入绘制劳力士的图标，其实就是绘制图片，代码如下：

ctx.save();
var image= new Image();
image.src="lls.jpg";
image.onload = function () {
drawImg(ctx,image);
};
function drawImg(context,image) {
context.drawImage(image,111,170,80,45);
}

最后我们添加时钟的指针，分别是秒指针、分指针、时指针，代码如下：

//秒针
ctx.save();
ctx.translate(150,150);
ctx.rotate(sec*Math.PI/30);//每一秒旋转6度
ctx.beginPath();
ctx.moveTo(0,30);
ctx.lineTo(0,-120);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.restore();
//分针
ctx.save();
ctx.translate(150,150);
ctx.rotate(sec*Math.PI/1800 + min*Math.PI/30);//每一秒再分60分，秒针走一刻度，分针要走1/60刻度,sec*(6*Math.PI/180)/60
ctx.beginPath();
ctx.moveTo(0,20);
ctx.lineTo(0,-100);
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.restore();
//时针
ctx.save();
ctx.translate(150,150);
ctx.rotate(min*Math.PI/360 + hour*Math.PI/6);//每一小时走过5个刻度线,60分钟,30deg，分成60份,30deg/60
ctx.beginPath();
ctx.moveTo(0,10);
ctx.lineTo(0,-80);
ctx.lineWidth = 3;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.restore();
//给时钟加入灰色边框
ctx.save();
ctx.beginPath();
ctx.lineWidth=3;
ctx.strokeStyle="gray"
ctx.arc(150,150,130,0,Math.PI*2,true);
ctx.stroke();
ctx.restore();
}

放上该项目git地址https://github.com/LJWLgl/WebDemo，如果有需要，可以去下载。