HTML5 Canvas實現圓形鐘表代碼演示

2024-09-05 12:18:56

字體：大中小

來源：轉載

供稿：網友

HTML5 Canvas實現圓形鐘表代碼演示，canvas標簽畫動畫，模擬一個圓形的時鐘代碼，練習Canvas的一個小作品，希望對大家學習HTML5有所幫助，代碼排列整齊，便于你閱讀。

<!DOCTYPE html><html><head><script type="text/javascript">function init(){  clock();  setInterval(clock,1000);  }  function clock(){  	  var now = new Date();  	  var ctx = document.getElementById('canvas').getContext('2d');  	  ctx.save();  	  ctx.clearRect(0,0,150,150);  	  ctx.translate(75,75);  	  ctx.scale(0.4,0.4);  	  ctx.rotate(-Math.PI/2);  	  ctx.strokeStyle = "black";  	  ctx.fillStyle = "white";  	  ctx.lineWidth = 8;  	  ctx.lineCap = "round";  	  ctx.save();  	  for (var i=0;i<12;i++){  		ctx.beginPath();  		ctx.rotate(Math.PI/6);  		ctx.moveTo(100,0);  		ctx.lineTo(120,0);  		ctx.stroke();  	  }  	  ctx.restore();  	  ctx.save();  	  ctx.lineWidth = 5;  	  for (i=0;i<60;i++){  		if (i%5!=0) {  		  ctx.beginPath();  		  ctx.moveTo(117,0);  		  ctx.lineTo(120,0);  		  ctx.stroke();  		}  		ctx.rotate(Math.PI/30);  	  }  	  ctx.restore();  		  var sec = now.getSeconds();  	  var min = now.getMinutes();  	  var hr  = now.getHours();  	  hr = hr>=12 ? hr-12 : hr;  	  ctx.fillStyle = "black";  	  ctx.save();  	  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )  	  ctx.lineWidth = 14;  	  ctx.beginPath();  	  ctx.moveTo(-20,0);  	  ctx.lineTo(80,0);  	  ctx.stroke();  	  ctx.restore();  	  ctx.save();  	  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )  	  ctx.lineWidth = 10;  	  ctx.beginPath();  	  ctx.moveTo(-28,0);  	  ctx.lineTo(112,0);  	  ctx.stroke();  	  ctx.restore();  	  ctx.save();  	  ctx.rotate(sec * Math.PI/30);  	  ctx.strokeStyle = "#D40000";  	  ctx.fillStyle = "#D40000";  	  ctx.lineWidth = 6;  	  ctx.beginPath();  	  ctx.moveTo(-30,0);  	  ctx.lineTo(83,0);  	  ctx.stroke();  	  ctx.beginPath();  	  ctx.arc(0,0,10,0,Math.PI*2,true);  	  ctx.fill();  	  ctx.beginPath();  	  ctx.arc(95,0,10,0,Math.PI*2,true);  	  ctx.stroke();  	  ctx.fillStyle = "#555";  	  ctx.arc(0,0,3,0,Math.PI*2,true);  	  ctx.fill();  	  ctx.restore();   	  ctx.beginPath();  	  ctx.lineWidth = 14;  	  ctx.strokeStyle = '#325FA2';  	  ctx.arc(0,0,142,0,Math.PI*2,true);  	  ctx.stroke();  	  ctx.restore();  }  </script></head><body onload="init();"><canvas id="canvas" width="150" height="150"></canvas></body></html>

上一篇：HTML5動態添加表格行列并編輯表格內容

下一篇：CSS3 3d文字跟隨鼠標變換角度