利用H5中canvas畫布繪製一個時鐘(動態)
阿新 • • 發佈：2018-12-12
注意：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支援 <canvas> 及其屬性和方法。Internet Explorer 8 以及更早的版本不支援 <canvas> 元素
效果圖如下：
實現程式碼：（程式碼中有相應註釋介紹，比較好懂，如果實在有不懂得地方，歡迎私信，或者參考W3C文件）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5<title>時鐘</title> 6 <style type="text/css"> 7 div{ 8 text-align: center; 9 } 10 </style> 11 </head> 12 <body> 13 <!--該div作用：讓時鐘在螢幕中間--> 14 <div> 15 <canvas width="800px" height="800px" id="myCanvas"></canvas> 16</div> 17 18 <script> 19 var myCanvas = document.getElementById("myCanvas"); 20 var ctx = myCanvas.getContext("2d"); 21 //獲取畫布寬和高 22 var w = myCanvas.width; 23 var h = myCanvas.height; 24 2526 //時鐘錶盤大小 27 var r = w/2; 28 29 30 //時鐘錶盤上的時間及刻度 31 function fun(){ 32 ctx.save();//儲存當前環境的狀態 33 //填充的漸變色 34 var r1 = Math.floor(Math.random()*256); 35 var g1 = Math.floor(Math.random()*256); 36 var b1 = Math.floor(Math.random()*256); 37 var grd=ctx.createLinearGradient(0,0,0,r); 38 grd.addColorStop(0,"rgb("+r1+","+g1+","+b1+")"); 39 grd.addColorStop(0.5,"rgb("+b1+","+g1+","+r1+")"); 40 grd.addColorStop(1,"rgb("+g1+","+b1+","+r1+")"); 41 42 //重新對映畫布上的 (0,0) 位置，即改變畫布原點位置 43 ctx.translate(r,r); 44 ctx.beginPath(); 45 ctx.lineWidth = 10; 46 ctx.arc(0,0,r-12,0,2*Math.PI,false); 47 ctx.strokeStyle = grd; 48 ctx.stroke(); 49 ctx.closePath(); 50 //設定時間刻度字型大小，對其方式，基線 51 ctx.font = "22px Arial"; 52 ctx.textAlign = "center"; 53 ctx.textBaseline = "middle" 54 //定義一個數組用於儲存時間刻度 55 var num = [3,4,5,6,7,8,9,10,11,12,1,2]; 56 //迴圈將時間顯示在錶盤中 57 for(var i = 0;i < num.length; i++){ 58 //定義時間刻度在錶盤中相應弧度，根據弧度利用正弦餘弦公式求出該刻度橫座標和縱座標 59 //數字3為陣列第一個數字刻度是因為，繪製圓時（0弧度）是從3對應刻度位置開始的 60 var rad = Math.PI*2/12*i; 61 var x = Math.cos(rad)*(r-60); 62 var y = Math.sin(rad)*(r-60); 63 ctx.beginPath(); 64 //填充文字 65 ctx.fillText(num[i],x,y); 66 ctx.fillStyle = grd; 67 ctx.closePath(); 68 } 69 70 for(var i = 0;i < 60; i++){ 71 var rad = Math.PI*2/60*i; 72 var x = Math.cos(rad)*(r-40); 73 var y = Math.sin(rad)*(r-40); 74 ctx.beginPath(); 75 ctx.arc(x,y,6,0,2*Math.PI,false); 76 //時間刻度點取餘，與現實錶盤相對應 77 if(i%5==0){ 78 ctx.fillStyle = grd; 79 ctx.arc(x,y,10,0,2*Math.PI,false); 80 }else{ 81 ctx.fillStyle = grd; 82 } 83 ctx.fill() 84 ctx.closePath(); 85 } 86 } 87 88 //繪製時針 89 function drawHour(hour,minute){ 90 ctx.save(); 91 //填充的漸變色 92 var r1 = Math.floor(Math.random()*256); 93 var g1 = Math.floor(Math.random()*256); 94 var b1 = Math.floor(Math.random()*256); 95 var grd=ctx.createLinearGradient(0,0,0,r); 96 grd.addColorStop(0,"rgb("+g1+","+r1+","+b1+")"); 97 grd.addColorStop(0.5,"rgb("+r1+","+b1+","+g1+")"); 98 grd.addColorStop(1,"rgb("+r1+","+g1+","+r1+")"); 99 100 //設定時針旋轉角度 101 var rad = Math.PI*2/12*hour; 102 //分針旋轉角度會對時針起影響，將對應分針旋轉角度加上 103 var rad_min = Math.PI*2/12/60*minute 104 //旋轉 105 ctx.rotate(rad+rad_min); 106 ctx.lineWidth = 8; 107 ctx.beginPath(); 108 ctx.moveTo(0,10); 109 ctx.lineTo(0,-r/2) 110 ctx.closePath(); 111 ctx.strokeStyle = grd; 112 ctx.stroke(); 113 ctx.restore();//返回之前儲存過的路徑狀態和屬性 114 } 115 116 //繪製分針,繪製過程和時針相似 117 function drawMinute(minute,second){ 118 ctx.save(); 119 120 var rad = Math.PI*2/60*minute; 121 var rad_seco = Math.PI*2/3600*second 122 ctx.rotate(rad + rad_seco); 123 ctx.lineWidth = 6; 124 ctx.beginPath(); 125 ctx.moveTo(0,20); 126 ctx.lineTo(0,-r+150) 127 ctx.lineCap = "round"; 128 ctx.stroke(); 129 ctx.restore(); 130 } 131 132 //繪製秒針 133 function drawScond(second){ 134 ctx.save(); 135 //填充的漸變色 136 var r1 = Math.floor(Math.random()*256); 137 var g1 = Math.floor(Math.random()*256); 138 var b1 = Math.floor(Math.random()*256); 139 var grd=ctx.createLinearGradient(0,0,0,r); 140 grd.addColorStop(0,"rgb("+r1+","+g1+","+b1+")"); 141 grd.addColorStop(0.5,"rgb("+b1+","+g1+","+r1+")"); 142 grd.addColorStop(1,"rgb("+g1+","+b1+","+r1+")"); 143 144 var rad = Math.PI*2/60*second; 145 ctx.rotate(rad); 146 ctx.beginPath(); 147 ctx.moveTo(-2,30); 148 ctx.lineTo(2,10) 149 ctx.lineTo(1,-r+50); 150 ctx.lineTo(-1,-r+50); 151 ctx.fillStyle = grd; 152 ctx.fill(); 153 //繪製秒針中間點綴 154 ctx.beginPath(); 155 ctx.strokeStyle = grd; 156 ctx.arc(0,-r/2,3,0,2*Math.PI,false); 157 ctx.stroke(); 158 ctx.arc(0,-r/2,2,0,2*Math.PI,false); 159 ctx.fillStyle = grd; 160 ctx.fill() 161 ctx.restore(); 162 } 163 164 //繪製固定時針分針秒針的中心點 165 function drawDot(){ 166 ctx.beginPath(); 167 ctx.fillStyle = "white"; 168 ctx.arc(0,0,4,0,2*Math.PI,false); 169 ctx.closePath(); 170 ctx.fill(); 171 } 172 173 //獲取系統當前時間，呼叫函式，傳引數 174 function drawClock(){ 175 ctx.clearRect(0,0,w,h); 176 var now = new Date(); 177 var hour = now.getHours(); 178 var minute = now.getMinutes(); 179 var second = now.getSeconds(); 180 fun(); 181 drawHour(hour,minute); 182 drawMinute(minute,second); 183 drawScond(second); 184 drawDot(); 185 ctx.restore(); 186 } 187 188 //呼叫函式顯示錶盤 189 drawClock(); 190 //設定定時器，跟隨系統讓時鐘動起來 191 setInterval(drawClock,1000); 192 </script> 193 </body> 194 </html>