新手用canvas画时钟

最新推荐文章于 2023-10-26 08:47:56 发布

qq_44848490

最新推荐文章于 2023-10-26 08:47:56 发布

阅读量149

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_44848490/article/details/129869697

版权

学习canvas时，发现手机上的时钟图标显示是动态的，且跟真实时间一致，正好用来练手，最终效果图如下：

实现思路：

时钟分为表盘（背景矩形+圆盘+刻度）和表针（时分秒），整个实现的过程分为4步：

转换坐标轴
画表盘+刻度线
画表针
让表针动起来

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clock</title>
</head>
<body>
    <canvas id="canvas" width="1800" height="1800"></canvas>
    <script>
        var context = canvas.getContext('2d')
        context.translate(400, 400)
        context.lineCap = "round"; // 画出的线条端点是圆角的
        function body() {
 
            context.beginPath();
            context.roundRect(-240,-240,480,480,90);
            context.fillStyle = '#1E90FF';
            context.fill()
            context.closePath();
            context.restore();  
            context.save();
        }
        // 画表盘
        function yuan_out() {
            // 表盘外圆
            context.beginPath();
            context.arc(0, 0, 220, 0, 2 * Math.PI);
            context.fillStyle = '#FFFFFF';
            context.fill()
            context.closePath();
            context.restore();  
            context.save();
        }
        // 画表盘刻度
        function num_hour() {
            for (let i = 0; i < 60; i++) {
                context.beginPath();
                context.lineWidth = 3;
                context.strokeStyle = '#708090';
                context.rotate(30 * Math.PI / 180);
                context.moveTo(180, 0);
                context.lineTo(200, 0);
                context.stroke();
                context.closePath();
            }
            context.restore()
            context.save()
        }

        // 时针
        function dHour(hour, min) {
            context.rotate((((360 / 12 * hour) - 90) + min / 60 * 30) * Math.PI / 180);
            context.beginPath()
            context.lineWidth = 12;
            context.moveTo(-10, 0)
            context.lineTo(100, 0)
            context.stroke()
            context.closePath()
            context.restore()
            context.save()
        }
        // 分针
        function dMinu(min) {
            context.rotate((360 / 60 * min - 90) * Math.PI / 180)
            context.beginPath()
            context.lineWidth = 8;
            context.strokeStyle = '#696969';
            context.moveTo(-10, 0)
            context.lineTo(180, 0)
            context.stroke()
            context.closePath()

            context.restore()
            context.save()
        }
        // 秒针
        function dSecd(sec) {
            context.rotate((360 / 60 * sec - 90) * Math.PI / 180)
            context.beginPath()
            context.lineWidth = 3;
            context.strokeStyle = '#1E90FF';
            context.moveTo(-20, 0)
            context.lineTo(200, 0)
            context.stroke()
            context.closePath()

            context.restore()
            context.save()
        }
        function yuan_in() {
            // 表盘内圆
            context.beginPath();
            context.lineWidth = 6;
            context.strokeStyle = '#1E90FF';//设置了颜色，为什么没变化
            context.arc(0, 0, 3, 0, 2 * Math.PI);  
            context.stroke();
            context.closePath();
            context.restore();  
            context.save();
        }
        function time() {
            var time = new Date(); // 获取当前时间
            var hour = time.getHours() % 12; //由于获取的小时是24小时制的，但是时钟是12小时制的
            var min = time.getMinutes();
            var sec = time.getSeconds();
            // console.log(hour)
            // console.log(min)
            // console.log(sec)
            context.clearRect(-400, -400, 1000, 1000); // 清除画布，不然指针转动后会留下痕迹
            body()
            yuan_out()
            num_hour()
            // num_min()
            dHour(hour, min)
            dMinu(min)
            dSecd(sec) // 调用上面所有函数
            yuan_in()
        }

        setInterval(time, 1000); // 设置定时器，每秒调用一次
    </script>
</body>
</html>