css - Sekeping kod Javascript yang menggunakan kanvas untuk mencipta jam halaman Saya tidak faham beberapa perkara. Saya harap seseorang boleh memberi saya nasihat.

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

gelung=setInterval(fungsi(){

ctx.clearRect(0,0,canvas.width,canvas.height);
drawClock();

},1000);

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

                                            angle=0,
                                            numeralWidth=0;

Yang pertama mentakrifkan tatasusunan, yang kedua mentakrifkan radian permulaan, dan yang ketiga mentakrifkan lebar tatasusunan?

Dalam tatasusunan traversal numericals.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);Apakah maksud algoritma ini?
ctx.fillText(numeral,canvas.width/2+Math.cos(aangle)*(HAND_RADIUS)-numeralWidth/2,
canvas.height/2+Math.sin(sudut)*(RADIUS_HAND)+FONT_HEIGHT/3) ;
Apakah maksud algoritma ini?

Dua bahagian fungsi drawHand(loc,isHour){
. . . . . .
}

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

Saya juga tidak faham fungsinya.

Akhirnya ctx.font=FONT_HEIGHT+"ps Arial" adakah ini set fon di sana?

setInterval(); Saya ingat ia sudah menjadi gelung, mengapa saya perlu menambah gelung=setInterval();
Apakah maksud ini? Saya harap seseorang boleh memberi saya sedikit tunjuk ajar tentang perkara yang saya tidak faham di atas Memandangkan saya masih baru, saya mungkin tidak terlalu teliti dalam bertanya, jadi saya memohon maaf atas pemahaman anda.

Answer 1

Pertama sekali, jika anda tidak memahaminya, mengapa anda tidak nyahpepijat langkah demi langkah?

Kedua, kod yang disiarkan begitu berantakan Adakah mudah untuk anda membacanya sendiri?

Sekarang saya telah membalas kepada anda, izinkan saya memberitahu anda secara ringkas

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

Menulis ini, nampaknya ini adalah contoh di Internet. Anda tidak mahu menggunakan Baidu, saya juga menggunakan Kanvas untuk melukis jam.

ctx.font soalan, jika anda tahu apa itu ctx, adakah anda tahu fon itu ditetapkan? Dari mana datangnya ctx Ia ditakrifkan dalam kod. Jika anda tidak tahu, tanya Baidu dan Google. ctx.font的问题，你知道ctx是什么了，就知道他是设置哪的字体了？ ctx哪里来，代码上有定义。不懂请百度Google。

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

Bagi soalan anda tentang loop=setInterval, semak sendiri setInterval. Ringkasnya, gelung ialah pengecam yang dikembalikan oleh pemasa ini Apabila anda tidak memerlukan pemasa ini, anda boleh menggunakan clearInterval (pengecam pemasa) untuk mengosongkan pemasa ini.

Akhirnya, jawapannya sentiasa ada, cuma sama ada anda sanggup mencarinya. 🎜