使用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();