[ZZ+CH] Html5 canvas+js 时钟

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

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

前辈在此:html5 canvas js(时钟) from kim_zh

感觉他写的有点大,颜色有点多,所以我调整了一下,更适合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 时钟,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。