css - A piece of Javascript code that uses canvas to create a page clock. I don’t understand a few things. I hope someone can give me some advice.

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);

In the function drawNumerals(){
..........
}, var numerals=[1,2,3,4,5,6,7,8, 9,10,11,12],

                                            angle=0,
                                            numeralWidth=0;

The first one defines an array, the second one defines the starting radian, and the third one defines the width of the array?

In array traversal 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);What does his algorithm mean?
ctx.fillText(numeral,canvas.width/2+Math.cos(aangle)*(HAND_RADIUS)-numeralWidth/2,
canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+ FONT_HEIGHT/3);
What does this algorithm mean?

Two sections of function drawHand(loc,isHour){
. . . . . .
}

        function drawHand(){
        ........
        }

The

function is not very clear either.

Finally ctx.font=FONT_HEIGHT+"ps Arial"; Is this the font set there?

setInterval(); I remember it’s already a loop, why do I need to add loop=setInterval();
What does this mean? I hope someone can give me some guidance on the things I don’t understand above. Since I’m a newbie, I may not be too thorough in asking questions, so I apologize for your understanding.

Answer 1

First of all, if you don’t understand it, why don’t you debug it step by step?

Second, the code posted is so messy. Is it easy for you to read it yourself?

Now that I’ve replied to you, let me tell you briefly

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);
    });
}

Writing this, it seems that this is an example on the Internet. There should be a video. You don’t want to use Baidu. I also use Canvas to draw the clock.

ctx.font的问题，你知道ctx是什么了，就知道他是设置哪的字体了？ ctxWhere does it come from? It is defined in the code. If you don’t know, ask Baidu and Google.

As for what you saidloop=setInterval的问题，自己查setInterval。简单来说loop是这个定时器返回的一个标识，在你不需要这个定时器的时候，可以使用clearInterval(定时器标识) to clear this timer.

Finally, the answer has always been there, it’s just whether you are willing to look for it.