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