css - 一段Javascript用canvas制作的一个页面时钟的代码，有几处地方不明白，希望有大神能指点一下。

问题描述

问 题

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();
这是什么意思？以上这些不明白的地方希望有大神指点，因为是新手，有些地方可能问的不是太彻底，忘谅解。

解决方案

首先，自己不懂，为什么不逐步调试呢？

第二，贴出来的代码这么乱，你自己读读好读吗？

既然回你了 就简单讲讲

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(定时器标识) 来清除这个定时器。

最后 答案一直都放在那里，只是你是否愿意去找。

这篇关于css - 一段Javascript用canvas制作的一个页面时钟的代码，有几处地方不明白，希望有大神能指点一下。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！