canvas 时钟转动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas 时钟转动</title>
</head>
<body>
    <!-- 实现思路：
        1、找到canvas的中心，画出表盘
        2、根据当前时间计算角度，画出时针，分针，秒针，和刻度
        3、使用定时器，每过一秒获取新的时间，并重新绘图，达到时钟转动的效果 -->
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        function drawClock() {
            context.save();
            context.clearRect(0, 0, 600, 600); //每次更新视图的时候都要把上一次的画布清除，再开始画新的视图
            context.translate(300,300); // 设置中心点，此时300，300变成了坐标的0，0
            context.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向
            context.save();
            // 画表盘
            context.beginPath();
            context.arc(0, 0, 100, 0, 2 * Math.PI);
            context.stroke(); 
            context.closePath();
            // 时针刻度
            context.lineWidth = 5;
            for(let i = 0; i < 12; i++) {
                context.rotate(2 * Math.PI / 12);
                context.beginPath();
                context.moveTo(100, 0);
                context.lineTo(85,0);
                context.stroke();
                context.closePath();
            }
            context.restore();
            context.save();

            // 分针刻度
            context.lineWidth = 1
            for (let i = 0; i < 60; i++) {
                context.rotate(2 * Math.PI / 60);
                context.beginPath();
                context.moveTo(100, 0);
                context.lineTo(90, 0);
                context.stroke();
                context.closePath();
            }
            context.restore();
            context.save();

            // 获取当前 时，分，秒
            let time = new Date();
            let hour = time.getHours() % 12; //将24小时转换为12小时
            let min = time.getMinutes();
            let sec = time.getSeconds();
            // 时针
            context.lineWidth = 5;
            context.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60));
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(50, 0);
            context.stroke();
            context.closePath(); 

            context.restore(); // 恢复成上一次save的状态
            context.save(); // 恢复完再保存一次

            //分针
            context.lineWidth = 3;
            context.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60));
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(70, 0);
            context.stroke();
            context.closePath(); 

            context.restore();
            context.save();

            //秒针
            context.lineWidth = 1;
            context.rotate(2 * Math.PI / 60 * sec);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(90, 0);
            context.stroke();
            context.closePath(); 

            context.restore();
            context.restore();
        }
        //使用setinterval();让时钟动起来
        setInterval(drawClock,1000);
    </script>
</body>
</html>

　　

posted @ 2021-08-24 09:38  学渣瓜  阅读(27)  评论(0)    收藏  举报