說(shuō)明：作為canvas初學(xué)者恩伺，好多知識(shí)都還沒(méi)來(lái)得及深入了解赴背，寫(xiě)下特效實(shí)現(xiàn)的梗概，謹(jǐn)以此紀(jì)念自己的第一次canvas 實(shí)踐
時(shí)光機(jī)
-
什么是canvas
canvas 是html5 新增的一個(gè)利用js腳本繪制位圖的標(biāo)簽晶渠，canvas 標(biāo)簽作為畫(huà)布凰荚，本身不具有繪圖的能力，而是依賴其對(duì)應(yīng)的上下文對(duì)象【利用getContext()方法取得,以下簡(jiǎn)稱‘canvas對(duì)象’】的一組API來(lái)實(shí)現(xiàn)褒脯。
-
canvas的應(yīng)用場(chǎng)景
canvas 對(duì)象常用于圖標(biāo)繪制便瑟，小游戲，活動(dòng)頁(yè)面憨颠，小特效等胳徽。
-
時(shí)鐘特效
實(shí)現(xiàn)過(guò)程可以分為三個(gè)步驟：繪制鐘面积锅，繪制指針指向爽彤，利用setInterval()循環(huán)調(diào)用繪制方法.
繪制鐘面 ：通過(guò)moveTo()方法，指定路徑的起點(diǎn)缚陷，再利用arc()方法分別繪制度數(shù)為6和30的弧适篙，再循環(huán)繪制塘娶，繪制出鐘面
繪制指針指向：創(chuàng)建一個(gè)時(shí)間對(duì)象草添，求出當(dāng)前時(shí)間的時(shí)、分扩所、秒虎锚，再利用moveTo與arc()方法繪制指針【注意：arc中當(dāng)起始弧度與結(jié)束弧度相同時(shí)硫痰，可以繪制直線】
setInterval()循環(huán)調(diào)用：設(shè)置間隔時(shí)間為1秒，循環(huán)繪制圖像
/*繪制分針刻度線,時(shí)針與分針實(shí)現(xiàn)思路相同,只需要每次遞增30度*/
var num=0;
for(var i=0;i<60;i++){
ndCanvas.moveTo(250,250);
ndCanvas.arc(250,250,180,num*Math.PI/180,(num+6)*Math.PI/180,false);
ndCanvas.stroke();
num+=6;
}
ndCanvas.beginPath();
ndCanvas.save();
ndCanvas.fillStyle='#fff';
ndCanvas.arc(250,250,170,0,2*Math.PI,false)
ndCanvas.fill();
ndCanvas.restore();
/*注意arc()方法的起始點(diǎn)在3點(diǎn)鐘位置,所以繪制路徑時(shí),將起始位置,逆時(shí)針旋轉(zhuǎn)90度,調(diào)整為以0點(diǎn)鐘作為方向*/
var time=new Date();
var hours=time.getHours();
var minS=time.getMinutes();
var secS=time.getSeconds();
//分針指向(時(shí)針和秒針實(shí)現(xiàn)思路相同)
ndCanvas.beginPath();
ndCanvas.save();
ndCanvas.lineWidth=4;
ndCanvas.moveTo(250,250);
ndCanvas.arc(250,250,130,(minS*6-90)*Math.PI/180,(minS*6-90)*Math.PI/180,false);
ndCanvas.stroke();
ndCanvas.restore();
/*循環(huán)繪制[每次重新繪制前,都需要用clearRect()方法清除畫(huà)布]*/
function startDraw(){
timeCode = setInterval(function(){
timer();
},1000);
}
