自己做个时钟-html5的canvas

这个只是用来练习对html5的掌握程度的。

首先，时钟有一个表盘。

表盘包括框、刻度2个

框就是 一个圆，刻度是一个一个小的线段

圆用arc函数可以画出来，刻度只能通过画圆弧来表现。然后用另外一个小的圆把多余的线遮掉

同理，指针也可以这样来完成，通过一个角度为0的圆弧。

然后计算当前时间，通过判断时间来得到角度。

代码如下：

 var canvas = null;
    var content = null;
    window.onload = function () {
        canvas = document.getElementById("canv");
        content = canvas.getContext("2d");
        
        setInterval("setTime()", 1000);
    }
    function setTime() {
        var times = new Date();
        var ohour = times.getHours();
        var omin = times.getMinutes();
        var osen = times.getSeconds();

        content.clearRect(0, 0, 1000, 760);
        content.save();

        content.beginPath();
        content.arc(500, 350, 330, 0, 360 * Math.PI / 180, false);
        content.closePath();
        content.stroke();

        for (var i = 0; i < 60; i++) {
            content.beginPath();
            content.moveTo(500, 350);
            content.arc(500, 350, 330, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
            content.closePath();
            content.stroke();
        }
        content.fillStyle = "#eee";
        content.beginPath();
        content.arc(500, 350, 330 * 19 / 20, 0, 360 * Math.PI / 180, false);
        content.closePath();
        content.fill();

        for (var i = 0; i < 12; i++) {
            content.beginPath();
            content.moveTo(500, 350);
            content.arc(500, 350, 330, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
            content.closePath();
            content.stroke();
        }
        content.fillStyle = "#eee";
        content.beginPath();
        content.arc(500, 350, 330 * 18 / 20, 0, 360 * Math.PI / 180, false);
        content.closePath();
        content.fill();

        var hourvalue = (ohour * 30 - 90 + omin / 12) * Math.PI / 180;
        var minvalue = (omin * 6 - 90) * Math.PI / 180;
        var senvalue = (osen * 6 - 90) * Math.PI / 180;


        content.lineWidth = 4;
        content.beginPath();
        content.moveTo(500, 350);
        content.arc(500, 350, 330 * 12 / 20, hourvalue, hourvalue, false);
        content.closePath();
        content.stroke();

        content.lineWidth = 3;
        content.beginPath();
        content.moveTo(500, 350);
        content.arc(500, 350, 330 * 15 / 20, minvalue, minvalue, false);
        content.closePath();
        content.stroke();

        content.lineWidth = 2;
        content.beginPath();
        content.moveTo(500, 350);
        content.arc(500, 350, 330 * 17 / 20, senvalue, senvalue, false);
        content.closePath();
        content.stroke();

        content.textBaseline = "top";
        content.fillStyle = "#333";
        content.font = "16px 微软雅黑";
        content.fillText(ohour + "：" + omin + "：" + osen, 470, 710);
        content.restore();
        //console.log(ohour + "：" + omin + "：" + osen);
    }