使用純HTML5編寫一款網頁上的時鐘的代碼分享

2020-03-24 17:21:35

字體：大中小

來源：轉載

供稿：網友

你需要知道的：canvas標簽只是圖形容器，您必須使用腳本來繪制圖形。默認大小：寬300px，高150px;getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。獲取上下文對象。
getContext( 2d ) 對象屬性和方法，可用于在畫布上繪制文本、線條、矩形、圓形等等。fillRect(l,t,w,h)：默認顏色是黑色 strokeRect(l,t,w,h):帶邊框的方塊。默認一像素黑色邊框setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。beginPath()：定義開始繪制路徑, 它把當前的點設置為 (0,0)。當一個畫布的環境第一次創建，beginPath()
方法會被顯式地調用。
closePath()：結束繪制路徑（將起點與終點進行連接）
繪制圓形：
arc（ x,y,半徑,起始弧度，結束弧度,旋轉方向）
x,y：起始位置
弧度與角度的關系：弧度=角度*Math.PI/180
旋轉方向：順時針（默認：false，逆時針：true）代碼：XML/HTML Code復制內容到剪貼板
window.onload=function(){ varoC=document.getElementById('ch1'); varoGC=oC.getContext('2d'); functiondrawClock(){ varx=200;//指定坐標 vary=200; varr=150;//指定鐘表半徑 oGC.clearRect(0,0,oC.width,oC.height);//清空畫布 varoDate=newDate();//創建日期對象 varoHours=oDate.getHours();//獲取時間 varoMin=oDate.getMinutes(); varoSen=oDate.getSeconds(); varoHoursValue=(-90+oHours*30+oMin/2)*Math.PI/180;//設置時針的值 varoMinValue=(-90+oMin*6)*Math.PI/180; varoSenValue=(-90+oSen*6)*Math.PI/180; oGC.beginPath();//開始 for(vari=0;i 60;i++){//i為60，代表著時鐘的60個小刻度 oGC.moveTo(x,y); oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);//循環從6度到12度 } oGC.closePath(); oGC.stroke(); oGC.fillStyle='white';//覆蓋住小刻度的黑色線 oGC.beginPath(); oGC.moveTo(x,y); oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false); oGC.closePath();//結束 oGC.fill(); oGC.lineWidth=3;//設置時鐘圓盤大刻度的粗細值 oGC.beginPath();//開始畫大的時鐘刻度 for(i=0;i 12;i++){//i為12，代表著時鐘刻度的12大格 oGC.moveTo(x,y); oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);//間隔為30度，弧度=角度*Math.PI/180 } oGC.closePath(); oGC.stroke(); oGC.fillStyle='white';//覆蓋住大刻度的黑色線 oGC.beginPath(); oGC.moveTo(x,y); oGC.arc(x,y,r*18/20,360*(i+1)*Math.PI/180,false); oGC.closePath(); oGC.fill();//表盤完成 oGC.lineWidth=5;//設置時針寬度 oGC.beginPath();//開始繪制時針 oGC.moveTo(x,y); oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//設置時針大小和弧度 oGC.closePath(); oGC.stroke(); oGC.lineWidth=3;//設置分針寬度 oGC.beginPath();//開始繪制分針 oGC.moveTo(x,y); oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//設置分針大小和弧度 oGC.closePath(); oGC.stroke(); oGC.lineWidth=1;//設置秒針寬度 oGC.beginPath();//開始繪制秒針 oGC.moveTo(x,y); oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//設置秒針大小和弧度 oGC.closePath(); oGC.stroke(); } setInterval(drawClock,1000);//設置定時器，讓時鐘運轉起來 drawClock(); }; /script /head body canvasid= ch1 width= 400px height= 400px /canvas /body /html html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html中的字體顏色怎么修改

下一篇：利用HTML實現限制ip的投票網站作弊方案