Canvas炫酷的时钟——绘制简单的动态案例

zhuanbike 2022-1-30 678

代码中我都加了详细注释,效果如下图:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas钟表</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
	body{margin:0;}
</style>
</head>
<body onload="draw()">
	<canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">您的浏览器不支持canvas!</canvas>
<script>
	//window.onload=draw;//使用window.onload可以马上执行函数,减少加载延迟 onload="run()" 取消注释在 body中写run()是马上执行
	function draw() {
			var canvas=document.getElementById('canvas');
			var ctx=canvas.getContext('2d');
			ctx.save(); //保存画笔状态
			ctx.translate(200,200);//调整坐标中心点到200、200位置
			var deg=2*Math.PI/12;    //定义一个值为30度的deg
			//////////////////////////////////////////////////表盘
			ctx.save();    
			ctx.beginPath();    
			for(var i=0;i<13;i++){
				var x=Math.sin(i*deg); //绘制12边形的起点
				var y=-Math.cos(i*deg);
				ctx.lineTo(x*150,y*150);    
				}
	var c=ctx.createRadialGradient(0,0,0,0,0,130);//渐变背景参数
	c.addColorStop(0,"orange");
	c.addColorStop(1,"red")
	ctx.fillStyle=c;
	ctx.fill();
	ctx.closePath();    
	ctx.restore();    
//////////////////////////////////////////////////数字
	ctx.save();
	ctx.beginPath();
	for(var i=1;i<13;i++){
		var x1=Math.sin(i*deg);
		var y1=-Math.cos(i*deg);
		ctx.fillStyle="#fff";
		ctx.font="bold 20px Calibri";
		ctx.textAlign='center';
		ctx.textBaseline='middle';
		ctx.fillText(i,x1*120,y1*120);    
	}
	ctx.closePath();    
	ctx.restore();    
//////////////////////////////////////////////////大刻度
	ctx.save();
	ctx.beginPath();    
	for(var i=0;i<12;i++){
		var x2=Math.sin(i*deg);
		var y2=-Math.cos(i*deg);
		ctx.moveTo(x2*148,y2*148);
		ctx.lineTo(x2*135,y2*135);    
	}    
	ctx.strokeStyle='#fff';
	ctx.lineWidth=4;
	ctx.stroke();
	ctx.closePath();
	ctx.restore();    
//////////////////////////////////////////////////小刻度
	ctx.save();
	var deg1=2*Math.PI/60;
		ctx.beginPath();    
		for(var i=0;i<60;i++){
		var x2=Math.sin(i*deg1);
		var y2=-Math.cos(i*deg1);
		ctx.moveTo(x2*146,y2*146);
		ctx.lineTo(x2*140,y2*140);    
	}    
	ctx.strokeStyle='#fff';
	ctx.lineWidth=2;
	ctx.stroke();
	ctx.closePath();    
	ctx.restore();    
///////////////////////////////////////////////////文字
	ctx.save();
	ctx.strokeStyle="#fff";
	ctx.font=' 34px sans-serif';
	ctx.textAlign='center';
	ctx.textBaseline='middle';
	ctx.strokeText('canvas',0,65);    
	ctx.restore();    
/////////////////////////////////////////////////new Date
	var time=new Date();
	var h=(time.getHours()%12)*2*Math.PI/12;
	var m=time.getMinutes()*2*Math.PI/60;
	var s=time.getSeconds()*2*Math.PI/60;
	ctx.save();
	ctx.rotate( h + m/12 + s/720) ;
	ctx.beginPath();
	ctx.moveTo(0,6);
	ctx.lineTo(0,-85);
	ctx.strokeStyle="#fff";
	ctx.lineWidth=6;
	ctx.stroke();
	ctx.closePath();
	ctx.restore();
//////////////////////////////////////////////分针
	ctx.save();
	ctx.rotate( m+s/60 ) ;
	ctx.beginPath();
	ctx.moveTo(0,8);
	ctx.lineTo(0,-105);
	ctx.strokeStyle="#fff";
	ctx.lineWidth=4;
	ctx.stroke();
	ctx.closePath();
	ctx.restore();
/////////////////////////////////////////////秒针
	ctx.save();
	ctx.rotate( s ) ;
	ctx.beginPath();
	ctx.moveTo(0,10);
	ctx.lineTo(0,-120);
	ctx.strokeStyle="#fff";
	ctx.lineWidth=2;
	ctx.stroke();
	ctx.closePath();
	ctx.restore();    
	ctx.restore();/////////////////////////////栈出
	setTimeout(draw, 1000);/////////////////////////////自己调用自己,迭代循环
}
	//setInterval("draw()",1000) //使用setIterval方法渲染,缺点,需要先执行完前面函数
</script>
</body>
</html>


最新回复 (0)
发新帖