Canvas API模拟时钟：分针与时针移动实现求助

安全阿岳

2026-7-1

实现Canvas模拟时钟的分针与时针转动方案

我正在用Canvas API开发一款不依赖时间对象的模拟时钟，要求秒针、分针、时针齐全，页面加载时所有指针指向9点位置后开始运转。目前表盘和秒针绘制正常，但分针和时针无法按预期移动。我尝试用计数器ct记录循环次数，计划每60次循环让分针转6度，每3600次循环让时针转30度，求实现思路和代码修正。

原代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog Clock</title>
    <style>
        #my-canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="my-canvas" width="400" height="300">
        Your web browser does not support canvas.
    </canvas>
    <script>
        window.onload = draw;
                function draw() {
                    let myCanvas = document.getElementById('my-canvas');

                    if(myCanvas.getContext) {
                        let ctx = myCanvas.getContext('2d');
                        // set interval to one second
                        setInterval(function() {
                            update(ctx);
                        }, 1000);
                    } else {
                        alert('Canvas is not supported.')
                    }
                }
                // set the counter
                let ct = 0;
                
                // set angles for clock hands
                let angleS = 6;
                let angleM = 6;
                let angleH = 30;

                // update function
                function update(ctx) {
                    ctx.clearRect(0, 0, 400, 300);
                    ctx.save();

                    showClock(ctx);
                    showHands(ctx);
                    
                    ctx.restore()
                }
                
                // show the clock 
                function showClock(ctx) {

                    // draw circle - body of the clock 
                    ctx.beginPath();
                    ctx.arc(120, 120, 120, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.strokeStyle = 'black';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    
                    // show clock "brand"
                    ctx.font = "18px Arial";
                    ctx.fillText('Timex', 98, 75);
                    
                    // show numbers 12, 3, 6 i 9
                    ctx.font = "43px serif";
                    ctx.fillText("12", 100, 40);
                    ctx.fillText("3", 215, 135);
                    ctx.fillText("6", 110, 235);
                    ctx.fillText("9", 5, 135);

                    // draw the center of the clock
                    ctx.beginPath();
                    ctx.arc(120,120, 10, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fillStyle = "black";
                    ctx.fill();
                    ctx.stroke();
                    
                }

                // show hands
                function showHands(ctx) {
                    ct += 1;
                    console.log(ct);

                    // draw hand for seconds
                    ctx.translate(120, 120);
                    ctx.rotate((Math.PI/180) * angleS);
                    ctx.translate(-120, -120); 

                    ctx.beginPath();
                    ctx.moveTo(120, 120);
                    ctx.strokeStyle = 'red';
                    ctx.lineTo(120, 10);
                    ctx.stroke();

                    // increase angle for 6 degrees 
                    angleS +=6;

                    if (ct < 60) {
                        // draw hands for minutes
                        ctx.restore();
                        ctx.beginPath();
                        ctx.moveTo(120, 120);
                        ctx.lineWidth = 5;
                        ctx.strokeStyle = 'black';
                        ctx.lineCap = 'round';
                        ctx.lineTo(120, 30);
                        ctx.stroke();
                    }

                    if (ct%60==0) {
                        
                        ctx.translate(120, 120);
                        ctx.rotate((Math.PI/180) * angleM);
                        ctx.translate(-120, -120); 
                        ctx.restore();

                        ctx.beginPath();
                        ctx.moveTo(120, 120);
                        ctx.lineWidth = 5;
                        ctx.strokeStyle = 'black';
                        ctx.lineCap = 'round';
                        ctx.lineTo(120, 30);
                        ctx.stroke();
                        ctx.restore();
                        // increase angle for minutes
                        angleM +=6;

                    } 
                        
                    
                    

                        
                        

                    
                // draw hands for hours
                    ctx.restore();
                    ctx.beginPath();
                    ctx.moveTo(120, 120);
                    
                    ctx.lineWidth = 9;
                    ctx.strokeStyle = 'black';
                    ctx.lineCap = 'round';
                    ctx.lineTo(45,120);
                    ctx.stroke();   
                }
    </script>
</body>
</html>

核心问题分析

原代码的主要问题在于：

初始角度设置错误：9点位置对应Canvas坐标系的180度方向（x轴负方向），而非原代码的6/30度
上下文状态管理混乱：restore()调用时机错误，导致指针绘制的旋转状态互相干扰
分针、时针的绘制逻辑未与计数器正确绑定，且未独立管理绘制状态

修正方案

1. 修正初始角度

将所有指针的初始角度设为180度，对应9点位置：

let angleS = 180; // 秒针初始角度
let angleM = 180; // 分针初始角度
let angleH = 180; // 时针初始角度

2. 独立管理每个指针的绘制状态

每个指针绘制时单独使用save()和restore()，避免状态污染：

保存当前上下文状态
平移到时钟中心
旋转对应角度
绘制指针
恢复上下文状态

3. 基于计数器更新角度

每秒（每次循环）秒针角度+6度
每60次循环（1分钟）分针角度+6度
每3600次循环（1小时）时针角度+30度

完整修正代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog Clock</title>
    <style>
        #my-canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="my-canvas" width="400" height="300">
        Your web browser does not support canvas.
    </canvas>
    <script>
        window.onload = draw;
        
        function draw() {
            let myCanvas = document.getElementById('my-canvas');
            if(myCanvas.getContext) {
                let ctx = myCanvas.getContext('2d');
                setInterval(function() {
                    update(ctx);
                }, 1000);
            } else {
                alert('Canvas is not supported.')
            }
        }
        
        let ct = 0;
        // 初始角度设为180度，对应9点位置
        let angleS = 180;
        let angleM = 180;
        let angleH = 180;

        function update(ctx) {
            ctx.clearRect(0, 0, 400, 300);
            showClock(ctx);
            showHands(ctx);
        }
        
        function showClock(ctx) {
            // 绘制时钟外框
            ctx.beginPath();
            ctx.arc(120, 120, 120, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 2;
            ctx.stroke();
            
            // 品牌文字
            ctx.font = "18px Arial";
            ctx.fillText('Timex', 98, 75);
            
            // 刻度数字
            ctx.font = "43px serif";
            ctx.fillText("12", 100, 40);
            ctx.fillText("3", 215, 135);
            ctx.fillText("6", 110, 235);
            ctx.fillText("9", 5, 135);

            // 时钟中心
            ctx.beginPath();
            ctx.arc(120,120, 10, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fillStyle = "black";
            ctx.fill();
            ctx.stroke();
        }

        function showHands(ctx) {
            ct += 1;

            // 绘制秒针
            ctx.save();
            ctx.translate(120, 120);
            ctx.rotate((Math.PI/180) * angleS);
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -110); // 从中心向上绘制（旋转后对应正确方向）
            ctx.stroke();
            ctx.restore();
            angleS += 6; // 每秒转6度

            // 绘制分针
            ctx.save();
            ctx.translate(120, 120);
            ctx.rotate((Math.PI/180) * angleM);
            ctx.beginPath();
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.lineCap = 'round';
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -90);
            ctx.stroke();
            ctx.restore();

            // 绘制时针
            ctx.save();
            ctx.translate(120, 120);
            ctx.rotate((Math.PI/180) * angleH);
            ctx.beginPath();
            ctx.lineWidth = 9;
            ctx.strokeStyle = 'black';
            ctx.lineCap = 'round';
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -60);
            ctx.stroke();
            ctx.restore();

            // 更新分针角度：每60秒转6度
            if (ct % 60 === 0) {
                angleM += 6;
            }

            // 更新时针角度：每3600秒转30度
            if (ct % 3600 === 0) {
                angleH += 30;
                // 可选：重置计数器避免数值过大
                ct = 0;
            }
        }
    </script>
</body>
</html>

关键优化说明

指针绘制改为从中心(0,0)出发绘制，简化坐标计算
每个指针独立使用save()/restore()，彻底避免状态干扰
计数器逻辑清晰绑定到分针、时针的更新时机
可选重置计数器，防止ct数值无限增大

内容的提问来源于stack exchange，提问作者Racz

Canvas API模拟时钟：分针与时针移动实现求助

核心问题分析 #

修正方案 #

1. 修正初始角度 #

2. 独立管理每个指针的绘制状态 #

3. 基于计数器更新角度 #

完整修正代码 #

关键优化说明 #