基于Canvas的带走动指针模拟时钟代码无法运行，求解决

你的代码存在多处拼写错误、语法问题和逻辑疏漏，导致无法正常渲染时钟，以下是问题点和修正后的完整代码：

问题点梳理 #

• CSS颜色值错误：light-orange 不是合法的CSS颜色名，应改为 lightorange
• 画布坐标系未平移：所有绘制逻辑以(0,0)为中心，但canvas默认原点在左上角，需将原点移至画布中心
• drawFace函数拼写错误：ctx.fil() → ctx.fill()；ctz.stroke() → ctx.stroke()
• 径向渐变参数缺失：createRadialGradient需要6个参数（内中心x,y、内半径，外中心x,y、外半径），原代码只传了3个
• drawTime小时计算语法错误：分号导致秒的增量未被加入小时计算
• drawHand函数拼写错误：-lenght → -length
• 无效注释代码：[]//second 需删除
• 未实时更新时钟：仅调用一次drawClock()无法实现指针走动，需用定时器每秒重绘

修正后的完整代码 #

<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color: lightorange"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
radius = radius * 0.90;
// 每秒重绘一次时钟
setInterval(drawClock, 1000);

function drawClock() {
    // 清除画布，避免重绘时重叠
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 将原点移至画布中心
    ctx.save();
    ctx.translate(radius, radius);
    drawFace(ctx, radius);
    drawNumbers(ctx, radius);
    drawTime(ctx, radius);
    ctx.restore();
}

function drawFace(ctx, radius){
    var grad;
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2*Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();
    // 修正径向渐变参数
    grad = ctx.createRadialGradient(0, 0, radius*0.95, 0, 0, radius*1.05);
    grad.addColorStop(0, '#333');
    grad.addColorStop(0.5, 'white');
    grad.addColorStop(1, '#333');
    ctx.strokeStyle = grad;
    ctx.lineWidth = radius*0.1;
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
    ctx.fillStyle = '#333';
    ctx.fill();
}

function drawNumbers(ctx, radius){
    var ang;
    var num;
    ctx.font = radius*0.15 + "px arial";
    ctx.textBaseline="middle";
    ctx.textAlign="center";
    for(num = 1;num < 13; num++){
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius*0.85);
        ctx.rotate(-ang);
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius*0.85);
        ctx.rotate(-ang);
    }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    // 修正小时计算的语法错误
    hour = hour % 12;
    hour = (hour*Math.PI/6) + (minute*Math.PI/(6*60)) + (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);

    // 修正拼写错误：mimute → minute
    minute = (minute*Math.PI/30) + (second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // 删除无效代码
    second = (second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width){
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    // 修正拼写错误：lenght → length
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>

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