HTML5 Canvas画时钟

使用HTML5 canvas绘制了一个时钟。

运行效果如下：

绘制的步骤如下所示：

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

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

绘制代码

我们的目标是，提供一个独立的时钟绘制功能，即提供一个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");
     
    //以下3句，可以绘制表盘的圆圈
    //context.beginPath();
    //context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
    //context.stroke();

    //绘制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();    //获取以毫秒为单位的当前时间
    //秒针、分针和时针的绘制参数
    //其中的p指的是该指针转一圈需要的毫秒数量
    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");
        //context.beginPath();
        //context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
        //context.stroke();

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