問題描述

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(定時器標識) 來清除這個定時器。