如何用canvas画时间同步的时钟

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图,可以说是H5最强大的标签.今天我们用CANVAS画一个简单的钟表.

封面图

效果如下

效果图

HTML代码

<body>
        <canvas id="myCanvas" width="500" height="500" style="border: 1px solid palevioletred;background-color: salmon"></canvas>
        <!--        你的浏览器 不支持-->
    </body>

没什么可说的

js代码

<script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        function drawclock() {
            var deg = Math.PI / 180;
            ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布
            //表盘
            ctx.beginPath();
            ctx.arc(250, 250, 200, 0, Math.PI * 2, true)
            ctx.lineWidth = 10;
            ctx.strokeStyle = "darksalmon";
            ctx.stroke();
            ctx.beginPath();
            ctx.strokeStyle = "black";
            ctx.lineWidth = 5;
            //数字
            for (var i = 0; i < 12; i++) {
                txt=i<1?12:[i];     //三目运算符
                ctx.font = "15px  KaiTi";
                ctx.lineWidth = 2;
                ctx.strokeText(txt, 244 + Math.sin(deg * 30 * i) * 170, 256 - Math.cos(deg * 30 * i) * 170);        
            }
            //时间点
                for (var j = 0; j < 60; j++) {
                    ctx.beginPath();
                    ctx.lineWidth =j%5==0?5:2;          
                    ctx.moveTo(250 + Math.sin(deg * 6 * j) * 185, 250 - Math.cos(deg * 6 * j) * 185);
                    ctx.lineTo(250 + Math.sin(deg * 6 * j) * 195, 250 - Math.cos(deg * 6 * j) * 195);
                    ctx.stroke();
                }
            //获取时间
            var now = new Date(); //定义时间
            var sec = now.getSeconds(); //获取秒
            var minute = now.getMinutes(); //获取分钟
            var hour = now.getHours(); //获取小时
            //小时必须获取浮点类型，产生偏移（小时+分钟比）
            hour = hour + minute / 60;
            hour = hour > 12 ? hour - 12 : hour;//将24小时转换为12小时
            //画分针
            ctx.save();//保存了ctx当前的状态值
            ctx.beginPath();
            ctx.strokeStyle = "yellow";
            ctx.lineWidth = 5;
            ctx.moveTo(250, 250);
            ctx.lineTo(250 + Math.sin(deg * 6 * minute) * 150, 250 - Math.cos(deg * 6 * minute) * 150);
            ctx.stroke();       
            //画秒针
            ctx.beginPath();
            ctx.strokeStyle = "red";
            ctx.lineWidth = 3;
            ctx.moveTo(250, 250);
            ctx.lineTo(250 + Math.sin(deg * 6 * sec) * 170, 250 - Math.cos(deg * 6 * sec) * 170);
            ctx.stroke();
            ctx.restore();
            //画时针
            ctx.beginPath();
            ctx.strokeStyle = "mediumspringgreen";
            ctx.lineWidth = 10;
            ctx.moveTo(250, 250);
            ctx.lineTo(250 + Math.sin(deg * 30 * hour) * 130, 250 - Math.cos(deg * 30 * hour) * 130);
            ctx.stroke();
            ctx.restore();//将ctx之前的状态值还原回去
        }
        drawclock();
        setInterval(drawclock, 1000);
    </script>

注意几点:
1.文字加粗会产生偏移,文字位置做了些修改
2.浮点表示小时可使效果更逼真

可在此基础上完善实现更好的效果

如何用canvas画时间同步的时钟

效果如下

HTML代码

js代码

推荐阅读更多精彩内容