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