問(wèn)題描述

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();} //畫(huà)出時(shí)鐘的圓框輪廓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); });} //畫(huà)出時(shí)鐘的12小時(shí)刻度f(wàn)unction drawCenter(){ ctx.beginPath(); ctx.arc(canvas.width/2,canvas.height/2,5,0,Math.PI*2,true); ctx.fill();} //時(shí)鐘盤(pán)心得實(shí)心圓點(diǎn)繪畫(huà)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);} //指針移動(dòng)繪畫(huà)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(){.........}這段函數(shù)里面，var numerals=[1,2,3,4,5,6,7,8,9,10,11,12],

angle=0, numeralWidth=0;

第一個(gè)是定義的是數(shù)組，第二個(gè)起始弧度，第三個(gè)要定義數(shù)組寬度干嘛？

在數(shù)組遍歷中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);他這個(gè)算法是什么意思？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(){........}

函數(shù)也看不太懂。

最后ctx.font=FONT_HEIGHT+'ps Arial';這是設(shè)置那里的字體？

setInterval();我記得已經(jīng)是循環(huán)了，為什么還要加loop=setInterval();這是什么意思？以上這些不明白的地方希望有大神指點(diǎn)，因?yàn)槭切率郑行┑胤娇赡軉?wèn)的不是太徹底，忘諒解。

問(wèn)題解答

首先，自己不懂，為什么不逐步調(diào)試呢？

第二，貼出來(lái)的代碼這么亂，你自己讀讀好讀嗎？

既然回你了 就簡(jiǎn)單講講

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 點(diǎn)的弧度值，不懂 打印一遍出來(lái)看看不就好了么?// 值從 -1/3π 依次遞增1/6π 最終到3/2π 至于干嘛的 數(shù)學(xué)知識(shí)，畫(huà)圖理解。// 3點(diǎn)為0，9點(diǎn)為π 順時(shí)針?lè)较?angle = Math.PI / 6 * (numeral - 3);console.log(’angle’, angle);// 文本寬度，1-12 數(shù)字的寬度都不一樣的 這個(gè)就是獲取文本寬度numeralWidth = ctx.measureText(numeral).width;/** * 填充文本 * @param {String} text 文本 * @param {Number} x 坐標(biāo)-x * @param {Number} y 坐標(biāo)-y */// canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth / 2 中點(diǎn)坐標(biāo) + 半徑*余弦 - 文本寬度的一半 不就表示文本填充的X坐標(biāo)嗎// 其余自己腦補(bǔ)ctx.fillText(numeral, canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth / 2, canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT / 3); });}

寫(xiě)了這些，好像這個(gè)是網(wǎng)上的例子吧，應(yīng)該有視頻的，你都不愿意百度的，我也是服 Canvas 繪制時(shí)鐘。

ctx.font的問(wèn)題，你知道ctx是什么了，就知道他是設(shè)置哪的字體了？ ctx哪里來(lái)，代碼上有定義。不懂請(qǐng)百度Google。

至于你說(shuō)loop=setInterval的問(wèn)題，自己查setInterval。簡(jiǎn)單來(lái)說(shuō)loop是這個(gè)定時(shí)器返回的一個(gè)標(biāo)識(shí)，在你不需要這個(gè)定時(shí)器的時(shí)候，可以使用clearInterval(定時(shí)器標(biāo)識(shí)) 來(lái)清除這個(gè)定時(shí)器。