[ZZ+CH] Html5 canvas+js 时钟

总之新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>

巴特西

[ZZ+CH] Html5 canvas+js 时钟

最新文章

热门文章