关于这个时钟代码里面有几处不明白的地方，望各位大神指点指点。

Question

var canvas=document.getElementById('canvas'),
                ctx=canvas.getContext('2d'),
                FONT_HEIGHT=15,                                             //字体高度
                MARGIN=35,                                                      //边缘
                HAND_TRUNCATION=canvas.width/25,                
                HOUR_HAND_TRUNCATION=canvas.width/10,
                NUMERAL_SPACING=20,                                     
                RADIUS=canvas.width/2-MARGIN,                       
                HAND_RADIUS=RADIUS+NUMERAL_SPACING;

function drawCircle(){
                        ctx.beginPath();
                        ctx.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);
                        ctx.stroke();
}                                                       //画出时钟的圆框轮廓
function drawNumerals(){ctx.beginPath();
                        ctx.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);
                        ctx.stroke();
    var numerals=[1,2,3,4,5,6,7,8,9,10,11,12],
    angle=0,
    numeralWidth=0;

    numerals.forEach(function(numeral){
                            angle=Math.PI/6*(numeral-3);  
                            numeralWidth=ctx.measureText(numeral).width;
                            ctx.fillText(numeral,canvas.width/2+Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,
                            canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);
    });
}                                                       //画出时钟的12小时刻度
function drawCenter(){
    ctx.beginPath();
    ctx.arc(canvas.width/2,canvas.height/2,5,0,Math.PI*2,true);
    ctx.fill();
}                                                       //时钟盘心得实心圆点绘画

function drawHand(loc,isHour){
    var angle=(Math.PI*2)*(loc/60)-Math.PI/2,
            handRadius=isHour?RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCATION:RADIUS-HAND_TRUNCATION;

            ctx.moveTo(canvas.width/2,canvas.height/2);
            ctx.lineTo(canvas.width/2+Math.cos(angle)*handRadius,
                            canvas.height/2+Math.sin(angle)*handRadius);
                            ctx.stroke();
}
function drawHands(){
    var date=new Date,
            hour=date.getHours();

            hour=hour>12?hour-12:hour; 

            drawHand(hour*5+(date.getMinutes()/60)*5,true,0.5);
            drawHand(date.getMinutes(),false,0.5);
            drawHand(date.getSeconds(),false,0.2);
}                                                                       //指针移动绘画
function drawClock(){
        drawCircle();
        drawCenter();
        drawHands();
        drawNumerals();
}
ctx.font=FONT_HEIGHT+'ps Arial';

loop=setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawClock();
},1000);

在function drawNumerals(){
.........
}这段函数里面，var numerals=[1,2,3,4,5,6,7,8,9,10,11,12],
angle=0,
numeralWidth=0;
第一个是定义的是数组，第二个起始弧度，第三个要定义数组宽度干嘛？

在数组遍历中numerals.forEach(function(numeral){
angle=Math.PI/6*(numeral-3);
numeralWidth=ctx.measureText(numeral).width;
ctx.fillText(numeral,canvas.width/2+Math.cos(aangle)*(HAND_RADIUS)-numeralWidth/2,
canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);
});
angle=Math.PI/6*(numeral-3);他这个算法是什么意思？
ctx.fillText(numeral,canvas.width/2+Math.cos(aangle)*(HAND_RADIUS)-numeralWidth/2,
canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);
这段算法是什么意思？

两段function drawHand(loc,isHour){
。。。。。。
}
function drawHand(){
........
}
函数也看不太懂。

最后ctx.font=FONT_HEIGHT+"ps Arial";这是设置那里的字体？

setInterval();我记得已经是循环了，为什么还要加loop=setInterval();
这是什么意思？以上这些不明白的地方希望有大神指点，因为是新手，有些地方可能问的不是太彻底，忘谅解。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

HTML5 Canvas时钟代码解析：

1. 首先理解drawClock()函数的主要功能和作用

首先，drawClock()函数的作用是绘制时钟。它包含以下几个步骤：

• 绘制时钟圆框（drawCircle())
• 绘制12小时刻度（drawNumerals()）
• 指针移动（drawHands()）

2. 关于drawNumerals()函数

drawNumerals()函数用于绘制12小时刻度。在这个函数中，使用了一个名为numerals的数组来存储数字。每个数字代表一个具体的小时或分钟位置。然后通过forEach()方法遍历数组中的所有元素，并计算当前位置的角度。角度根据当前数字的位置进行调整。接下来，获取到的文本内容并用ctx.fillText()方法将其绘制到屏幕上。

3. numerals=[1,2,3,4,5,6,7,8,9,10,11,12]

这个数组是用来生成时钟上的数字的。每相邻的两个数字之间的角度是相等的，因此，你可以看到它们是按顺序排列的。例如，从左向右数第四个数字是12，而第五个数字则是3。如果你想要改变时钟上的数字显示，只需更改numerals数组即可。

4. angle=Math.PI/6*(numeral-3)

这里是在计算角度。当角度为正数时，表示数字向右旋转；当角度为负数时，表示数字向左旋转。这里的表达式numeral-3意味着数字相对于其原始位置（即0）的偏移量，从而确定数字的实际旋转方向。这个值会被添加到angle变量中，以计算最终的角度。

5. ctx.fillText(numeral,canvas.width/2+Math.cos(aangle)*(HAND_RADIUS)-numeralWidth/2,

这段代码是将数字numeral的内容绘制到屏幕上的指定位置。其中：

• ctx 是上下文对象，用于绘图操作。
• ctx.font 设置了字体大小。
• canvas.width/2+Math.cos(aangle)*(HAND_RADIUS) 计算出绘制数字的中心点坐标。
• -numeralWidth/2 是为了使文字居中对齐。

6. drawHand(loc,isHour){...}

这三个函数分别绘制了不同的手部：小时、分钟和秒的手部。drawHand()接受三个参数：loc 表示手部所在的位置（可能是“hour”、“minute”或“second”），isHour 表示是否绘制小时的手部。

7. ctx.font="FONT_HEIGHT" ps Arial"

这段代码设置了字体大小。FONT_HEIGHT 可以被修改以适应你的具体需求。

8. setInterval(...);

setInterval()是一个内置的JavaScript定时器函数，它可以重复执行某个函数。在这里，setInterval(...); 会定期调用drawClock()函数。这使得时钟可以持续更新，即使浏览器窗口关闭后重新打开也能保持时钟的状态不变。

总结起来，这段代码构建了一个基本的HTML5 Canvas时钟，包括了时钟的圆形框架、12小时刻度、以及即时显示的分钟和秒指针。你可以在运行代码时观察到时钟的变化。