css - Un morceau de code Javascript qui utilise Canvas pour créer une horloge de page. Je ne comprends pas certaines choses. J'espère que quelqu'un pourra me donner des conseils.

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

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

                                            angle=0,
                                            numeralWidth=0;

Le premier définit un tableau, le second définit le radian de départ et le troisième définit la largeur du tableau ?

Dans le parcours du tableau digitals.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*(chiffre-3);Que signifie cet algorithme ?
ctx.fillText(numeral,canvas.width/2+Math.cos(aangle)*(HAND_RADIUS)-numeralWidth/2,
canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3) ;
Que signifie cet algorithme ?

Deux sections de la fonction drawHand(loc,isHour){
. . . . . .
}

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

Je ne comprends pas très bien la fonction non plus.

Enfin ctx.font=FONT_HEIGHT+"ps Arial" ; est-ce la police définie ici ?

setInterval(); Je me souviens que c'est déjà une boucle, pourquoi dois-je ajouter loop=setInterval();
Qu'est-ce que cela signifie ? J'espère que quelqu'un pourra me donner des conseils sur les choses que je ne comprends pas ci-dessus. Comme je suis un débutant, je ne poserai peut-être pas trop de questions, alors je m'excuse de votre compréhension.

Answer 1

Tout d’abord, si vous ne le comprenez pas, pourquoi ne le déboguez-vous pas étape par étape ?

Deuxièmement, le code publié est tellement compliqué. Est-il facile pour vous de le lire vous-même ?

Maintenant que je vous ai répondu, laissez-moi vous dire brièvement

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

En écrivant ceci, il semble que ce soit un exemple sur Internet. Il devrait y avoir une vidéo. Vous ne voulez pas utiliser Baidu. J'utilise également Canvas pour dessiner l'horloge.

Question ctx.font, si vous savez ce qu'est ctx, savez-vous sur quelle police il est défini ? D'où vient ctx ? Il est défini dans le code. Si vous ne le savez pas, demandez à Baidu et Google. ctx.font的问题，你知道ctx是什么了，就知道他是设置哪的字体了？ ctx哪里来，代码上有定义。不懂请百度Google。

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

Quant à votre question sur loop=setInterval, vérifiez vous-même setInterval. En termes simples, loop est un identifiant renvoyé par ce timer. Lorsque vous n'avez pas besoin de ce timer, vous pouvez utiliser clearInterval (timer identifier) pour effacer ce timer.

Enfin, la réponse a toujours été là, il s’agit simplement de savoir si vous êtes prêt à la chercher. 🎜