使用Canvas HTML5画出时钟

什么是canvas

canvas 是html5 新增的一个利用js脚本绘制位图的标签，canvas 标签作为画布，本身不具有绘图的能力，而是依赖其对应的上下文对象【利用getContext()方法取得,以下简称‘canvas对象’】的一组API来实现。

canvas的应用场景

canvas 对象常用于图标绘制，小游戏，活动页面，小特效等。

时钟特效

实现过程可以分为三个步骤：绘制钟面，绘制指针指向，利用setInterval()循环调用绘制方法.

1.绘制钟面：通过moveTo()方法，指定路径的起点，再利用arc()方法分别绘制度数为6和30的弧，再循环绘制，绘制出钟面

2.绘制指针指向：创建一个时间对象，求出当前时间的时、分、秒，再利用moveTo与arc()方法绘制指针【注意：arc中当起始弧度与结束弧度相同时，可以绘制直线】

3.setInterval()循环调用：设置间隔时间为1秒，循环绘制图像

运行效果如下：

绘制的步骤如下所示：

1.创建一个canvas标签，此标签本身并没有绘图功能，但它是绘图的容器。代码如下所示：

<canvas id="clock" width="500" height="500"></canvas>

2.绘制代码：

我们的目标是，提供一个独立的时钟绘制功能，即提供一个Clock的类，通过new创建一个时钟实例，就可以绘制一个完整的时钟表盘。例如：

var clock = new Clock("clock", 200);  //"clock"是canvas的id， 200是整个表盘的大小，后面的指钟刻度均以此值自行调整
clock.start();  //开始绘制

Clock类的定义如下：

function Clock(canvasId, size) {var canvas = document.getElementById(canvasId); //获取canvas对象var imgData = null;    //用于保存绘制好的表盘刻度var context = null;    //保存context绘图对象var radius = size / 2; //钟表的半径this.start = function () {if (canvas.getContext) {  //测试是否支持绘图init();               //绘制表盘drawPointers();       //立刻绘制指针  setInterval(drawPointers, 10);  //每隔10毫秒绘制一次指针} else {console.log("浏览器不支持canvas绘图");}};//....其它方法
}

init方法，绘制表盘刻度，代码如下：

function init() {context = canvas.getContext("2d");//绘制60个刻度for (var i = 0; i < 60; i++) {var arc = i * 6 / 360 * 2 * Math.PI;var lineWidth = "1";var length = size * 0.01;if (i % 5 == 0) {  //其中每隔5个刻度，刻度线条要粗一个像素lineWidth = "2";length = size * 0.02;}context.beginPath();context.lineWidth = lineWidth;context.moveTo(Math.cos(arc) * (radius - length) + radius, Math.sin(arc) * (radius - length) + radius);context.lineTo(Math.cos(arc) * radius + radius, Math.sin(arc) * radius + radius);context.stroke();}//将绘制好的表盘保存起来imgData = context.getImageData(0, 0, size, size);
}

drawPointers方法，同时绘制时钟、分钟和秒针：

function drawPointers() {context.putImageData(imgData, 0, 0); //恢复表盘数据到当前canvas，即覆盖掉上一次绘制的指针var ms = getDateByMilliseconds();    //获取以毫秒为单位的当前时间var configs = [{ p: 60000, width: "1", style: "rgba(0,0,255)", length: radius * 0.8 },{ p: 60000 * 60, width: "2", style: "rgba(100,0,255)", length: radius * 0.6 },{ p: 1000 * 60 * 60 * 12, width: "4", style: "rgba(100,200,255)", length: radius * 0.5 },];configs.forEach(function (c) {var sArc = (ms / c.p) * 2 * Math.PI - Math.PI / 2;context.beginPath();context.lineWidth = c.width;context.moveTo(radius, radius);context.lineTo(Math.cos(sArc) * c.length + radius, Math.sin(sArc) * c.length + radius);context.strokeStyle = c.style;context.stroke();});
}

getDateByMilliseconds，返回以毫秒为单为的当前时间：

function getDateByMilliseconds() {var now = new Date();var hours = now.getHours() * 3600 * 1000;var minutes = now.getMinutes() * 60 * 1000;var seconds = now.getSeconds() * 1000;return hours + minutes + seconds + now.getMilliseconds();
}

最后附上完整的代码：

function Clock(canvasId, size) {var canvas = document.getElementById(canvasId);var imgData = null;var context = null;var radius = size / 2;this.start = function () {if (canvas.getContext) {init();drawPointers();setInterval(drawPointers, 10);} else {console.log("浏览器不支持canvas绘图");}};function init() {context = canvas.getContext("2d");for (var i = 0; i < 60; i++) {var arc = i * 6 / 360 * 2 * Math.PI;var lineWidth = "1";var length = size * 0.01;if (i % 5 == 0) {lineWidth = "2";length = size * 0.02;}context.beginPath();context.lineWidth = lineWidth;context.moveTo(Math.cos(arc) * (radius - length) + radius, Math.sin(arc) * (radius - length) + radius);context.lineTo(Math.cos(arc) * radius + radius, Math.sin(arc) * radius + radius);context.stroke();}imgData = context.getImageData(0, 0, size, size);}function drawPointers() {context.putImageData(imgData, 0, 0);var ms = getDateByMilliseconds();var configs = [{ p: 60000, width: "1", style: "rgba(0,0,255)", length: radius * 0.8 },{ p: 60000 * 60, width: "2", style: "rgba(100,0,255)", length: radius * 0.6 },{ p: 1000 * 60 * 60 * 12, width: "4", style: "rgba(100,200,255)", length: radius * 0.5 },];configs.forEach(function (c) {var sArc = (ms / c.p) * 2 * Math.PI - Math.PI / 2;context.beginPath();context.lineWidth = c.width;context.moveTo(radius, radius);context.lineTo(Math.cos(sArc) * c.length + radius, Math.sin(sArc) * c.length + radius);context.strokeStyle = c.style;context.stroke();});}function getDateByMilliseconds() {var now = new Date();var hours = now.getHours() * 3600 * 1000;var minutes = now.getMinutes() * 60 * 1000;var seconds = now.getSeconds() * 1000;return hours + minutes + seconds + now.getMilliseconds();}
}var clock = new Clock("clock", 200);
clock.start();