css - 一段Javascript用canvas製作的一個頁面時鐘的程式碼，有幾處地方不明白，希望有大神能指點一下。

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

首先，自己不懂，為什麼不逐步調試呢？

第二，貼出來的程式碼這麼亂，你自己讀好讀嗎？

既然回你了 就簡單講講

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) {
        // 1- 12 点的弧度值，不懂 打印一遍出来看看不就好了么?
        // 值从 -1/3π 依次递增1/6π 最终到3/2π  至于干嘛的 数学知识，画图理解。
        // 3点为0，9点为π 顺时针方向 
        angle = Math.PI / 6 * (numeral - 3);
        console.log('angle', angle);

        // 文本宽度，1-12 数字的宽度都不一样的 这个就是获取文本宽度
        numeralWidth = ctx.measureText(numeral).width;

        /**
         * 填充文本
         * @param {String} text 文本
         * @param {Number} x 坐标-x
         * @param {Number} y 坐标-y
         */
        // canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth / 2  中点坐标 + 半径*余弦 - 文本宽度的一半 不就表示文本填充的X坐标吗
        // 其余自己脑补
        ctx.fillText(numeral, canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth / 2,
            canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT / 3);
    });
}

寫了這些，好像這個是網路上的例子吧，應該有影片的，你都不願意百度的，我也是服 Canvas 繪製時鐘。

ctx.font的问题，你知道ctx是什么了，就知道他是设置哪的字体了？ ctx哪裡來，程式碼上有定義。不懂請百度Google。

至於你說loop=setInterval的问题，自己查setInterval。简单来说loop是这个定时器返回的一个标识，在你不需要这个定时器的时候，可以使用clearInterval(定时器标识) 來清除這個定時器。

最後 答案一直都放在那裡，只是你願不願意去找。