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