2、ripttype="text/javascript">varnow;//當(dāng)前時(shí)間varctx;//動(dòng)畫(huà)標(biāo)簽varhour;//當(dāng)前時(shí)間的小時(shí)值；varminute;//當(dāng)前時(shí)間的分鐘值varsecond;//當(dāng)前時(shí)間的秒值functioninit(){//畫(huà)出時(shí)鐘clock();//讓時(shí)鐘動(dòng)起來(lái)setInterval(funcName,delay)//funcName:調(diào)用的函數(shù)名delay:調(diào)用函數(shù)的間隔，以毫秒計(jì)算。1000毫秒=1秒setInterval(clock,1000);}//畫(huà)出時(shí)鐘funct
3、ionclock(){//獲取到當(dāng)前的時(shí)間//Date對(duì)象自動(dòng)使用當(dāng)前的日期和時(shí)間作為其初始值。now=newDate();//獲得動(dòng)畫(huà)標(biāo)簽getContext()規(guī)定畫(huà)面上的繪制環(huán)境，目前只有2dctx=document.getElementById("canvas").getContext("2d");////獲取時(shí)鐘的小時(shí)、分鐘、秒的值//now.獲取現(xiàn)在時(shí)間(小時(shí)、分鐘、秒)整數(shù)hour=now.getHours();minute=now.getMinutes();second=now.getSeco
4、nds();//開(kāi)始畫(huà)save()保存當(dāng)前圖像的狀態(tài)ctx.save();//保存之前狀態(tài)，同時(shí)將保存后的狀態(tài)畫(huà)筆位置重置initJob();//1、初始化操作drawBorder();//2、畫(huà)時(shí)鐘外框hourScale();//3、小時(shí)刻度minuteScale();//4、分鐘刻度hourNeedle();//5、時(shí)針minuteNeedle();//6、分針secondNeedle();//7、秒針ctx.restore();//結(jié)束restore()畫(huà)完，將畫(huà)筆狀態(tài)還原}//初始化操作functio
5、ninitJob(){//clearRect()方法刪除一個(gè)畫(huà)布的矩形區(qū)域。ctx.clearRect(0,0,600,600);//這里主要為了刪除指針區(qū)域ctx.translate(300,300);//指針偏移位置，默認(rèn)從0，0處開(kāi)始ctx.scale(0.7,0.7);//縮放比例ctx.lineCap="round";//刻度樣式round圓butt平直square正方形//canvas中rotate()中的角度是用弧度指定的//指針初始位置指在12點(diǎn)PI:180度ctx.rotate(-Math.
6、PI/2);}//畫(huà)時(shí)鐘外框functiondrawBorder(){ctx.save();//beginPath()丟棄任何當(dāng)前定義的路徑并且開(kāi)始一條新的路徑ctx.beginPath();//開(kāi)始新路徑ctx.lineWidth=15;//畫(huà)筆寬度，即時(shí)鐘外框的寬度//畫(huà)圓0，0中心點(diǎn)坐標(biāo)(畫(huà)筆偏移過(guò)后的位置就是中心點(diǎn))200半徑Math.PI*2結(jié)束角度true逆時(shí)針(false順時(shí)針)ctx.arc(0,0,200,0,Math.PI*2,true);//畫(huà)筆顏色ctx.strokeStyle="li
7、ghtcoral";//開(kāi)始畫(huà)ctx.stroke();//動(dòng)筆畫(huà)ctx.restore();//畫(huà)筆路徑重置}//小時(shí)刻度f(wàn)unctionhourScale(){ctx.save();ctx.lineWidth=7;//一天12小時(shí)，畫(huà)十二個(gè)刻度f(wàn)or(vari=0;i<12;i++){ctx.beginPath();//開(kāi)始新路徑//360度/12度=30度，Math.PI:180弧度ctx.rotate(Math.PI/6);//刻度長(zhǎng)度180-160=20//moveto是移動(dòng)到某個(gè)坐標(biāo)，lineto
8、是從當(dāng)前坐標(biāo)連線到某個(gè)坐標(biāo)ctx.moveTo(180,0);//畫(huà)筆結(jié)束畫(huà)的位置ctx.lineTo(160,0);//畫(huà)筆開(kāi)始的位置ctx.stroke();//動(dòng)筆畫(huà)}ctx.restore();//重置畫(huà)筆路徑}//分鐘刻度f(wàn)unctionminuteScale(){ctx.save();ctx.lineWidth=4;//一小時(shí)60分鐘for(vari=0;i<60;i++){//畫(huà)分鐘刻