[ZZ+CH] Html5 canvas+js 时钟

浏览数：44 / 时间：2015年06月09日

总之新Blog入驻以后，又开始老习惯，到处折腾自定义的空间，放些东西。

想起以前大一的时候做过一个Javascript的时间显示器，现在想做一个时钟，当然现在老奸巨猾，会先去看一看有前辈写过没。

感觉他写的有点大，颜色有点多，所以我调整了一下，更适合cnblog的侧边栏，另外去掉了秒针，调整了一些宽度。

<canvas id = "clock" width = "200px" height = "200px">
您的浏览器已过时，请更新！
</canvas>

    <script type = "text/javascript">
        var clock = document.getElementById("clock");
        var cxt = clock.getContext("2d");
        function drawClock(x) {
            var y = x / 2; var r = (x - 50) / 2;
            var x1 = r - 10; var x2 = r - 20;
            var x3 = r - 30; var x4 = r - 40;
            var x5 = r - 50;
            //清除画布
            cxt.clearRect(0, 0, x, x);

            var now = new Date;
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hour = now.getHours();

            //解决时针的问题：1、小时之间  2、19:59:30s
            hour += min / 60;
            hour = hour > 12 ? hour - 12 : hour;

            //时刻度
            for (var i = 0; i < 12;i++ ) {
                cxt.save();
                cxt.lineWidth = 3;
                cxt.strokeStyle = "#000";
                cxt.translate(y, y);
                cxt.rotate(i*30 * Math.PI / 180);
                cxt.beginPath();
                cxt.moveTo(0, -x1); cxt.lineTo(0, -x2);
                cxt.closePath();
                cxt.stroke(); cxt.restore();
            }
            //分刻度
            for (var i = 0; i < 36; i++) {
                cxt.save();
                cxt.lineWidth = 1;
                cxt.strokeStyle = "#000";
                cxt.translate(y, y);
                cxt.rotate(i * 10 * Math.PI / 180);
                cxt.beginPath();
                cxt.moveTo(0, -x1); cxt.lineTo(0, -x2);
                cxt.closePath();
                cxt.stroke(); cxt.restore();
            }
            //时针
            cxt.save();
            cxt.lineWidth = 2;
            cxt.strokeStyle = "#000";
            cxt.translate(y, y);
            cxt.rotate(hour * 30 * Math.PI / 180);
            cxt.beginPath();
            cxt.moveTo(0, -x5); cxt.lineTo(0, 15);
            cxt.closePath();
            cxt.stroke();  cxt.restore();
            //分针
            cxt.save();
            cxt.lineWidth = 1;
            cxt.strokeStyle = "#000";
            cxt.translate(y, y);
            cxt.rotate(min * 6 * Math.PI / 180);
            cxt.beginPath();
            cxt.moveTo(0, -x4); cxt.lineTo(0, 18);
            cxt.closePath();
            cxt.stroke(); cxt.restore();
        }
        //行走
        drawClock(200);
        setInterval("drawClock(200)", 60000);
    </script>