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文字跟随鼠标变换角度

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注