canvas画布实现钟表的绘制,并时刻显示时间,canvas画圆,

骑猪看日落 2021-09-16 05:00 577阅读 0赞

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#cv{
    			box-shadow:5px 5px 5px gray;
    			border:1px solid #ccc;
    		}
    	</style>
    </head>
    <body>
    	<canvas  width="500" height="500"  id="cv">
    		当浏览器版本太低,不支持canvas绘图功能,请换个浏览器试试
    	</canvas>
    </body>
    <script>
    	// ctx.beginPath();
    	// ctx.moveTo(250,250);
    	//第四个参数:0度的位置就是x轴正方向,顺正逆负:true表示逆时针,false表示顺时针
    	// ctx.arc(250,250,200,0,Math.PI/3,false);
    	// ctx.stroke();
    	// ctx.fill();
    	//
    
    	setInterval(time,1000);
    	time();
    	//事件函数
    	function time(){
    		//获取元素
    		var cv = document.getElementById("cv");
    		var ctx = cv.getContext('2d');
    		//Math.PI是180度,du定义为6度的角度
    		var du = Math.PI/180*6;
    		//通过画弧将所有的弧线链接就是圆的外形
    		for(var i=0;i<60;i++){
    			ctx.beginPath();
    			ctx.moveTo(250,250);
    			ctx.arc(250,250,200,i*du,(i+1)*du,false);
    			ctx.lineWidth=0.5;
    			ctx.stroke();	
    		}
    		// //在此刻的圆上遮盖一个代销合适的圆
    		ctx.arc(250,250,190,0,Math.PI*2,false);
    		ctx.fillStyle="white";
    		ctx.fill();	
    		// //画出整点的时刻
    		var du1 = Math.PI/180*45;
    		for(var i=0;i<8;i++){
    			ctx.beginPath();
    			ctx.moveTo(250,250);
    			ctx.lineWidth=1;
    			ctx.arc(250,250,200,i*du1,(i+1)*du1,false);
    			ctx.stroke();
    		}
    		// //继续遮盖圆
    		ctx.beginPath();
    		ctx.arc(250,250,170,0,Math.PI*2,false);
    		ctx.fill();
    		// //获取事件对象
    		var date = new Date();
    		var hours = date.getHours();
    		var minutes = date.getMinutes();
    		var seconds = date.getSeconds();
    		console.log(hours,minutes,seconds);
    		if(hours>12){
    			hours=hours-12;
    		}	
    		//秒	
    		ctx.beginPath();
    		ctx.moveTo(250,250);
    		ctx.lineWidth=2;
    		ctx.strokeStyle="red";
    		ctx.arc(250,250,150,Math.PI/180*(seconds*6-90),Math.PI/180*(seconds*6-90),false);
    		ctx.stroke();
    		//分钟
    		ctx.beginPath();
    		ctx.moveTo(250,250);
    		ctx.lineWidth=3;
    		ctx.strokeStyle="pink";
    		ctx.arc(250,250,120,Math.PI/180*(minutes*6+(seconds*6/60)-90),Math.PI/180*(minutes*6+(seconds*6/60)-90),false);
    		ctx.stroke();
    		// 时钟
    		ctx.beginPath();
    		ctx.moveTo(250,250);
    		ctx.lineWidth=5;
    		ctx.strokeStyle="blue";
    		ctx.arc(250,250,100,Math.PI/180*(hours*30+(minutes*30/60)-90),Math.PI/180*(hours*30+(minutes*30/60)-90),false);
    		ctx.stroke();
    	}
    </script>
    </html>

canvas画布实现钟表的绘制,并时刻显示时间:主要使用到canvas画圆

绘制圆弧:context.arc(x,y,r,sAngle,eAngle,counterclockwise);

圆弧的0度是三点钟方向

x:圆的中心x坐标 y:圆的中心y坐标 r:圆的半径,sAngle:起始角,用弧度计算,eAngle:是结束角,

counterclockwise:是一个布尔值false是顺时针,true是逆时针

下面为钟表的制作过程

1.:画出外壳和每个刻度

//Math.PI是180度,du定义为6度的角度
    		var du = Math.PI/180*6;
    		//通过画弧将所有的弧线链接就是圆的外形
    		for(var i=0;i<60;i++){
    			ctx.beginPath();
    			ctx.moveTo(250,250);
    			ctx.arc(250,250,200,i*du,(i+1)*du,false);
    			ctx.lineWidth=0.5;
    			ctx.stroke();	
    		}

![70][]

2.在画布上遮盖一个白色的圆

ctx.arc(250,250,190,0,Math.PI*2,false);
    		ctx.fillStyle="white";
    		ctx.fill();

![70 1][]

3.画出整点的刻度并将多余部分遮盖

// //画出整点的时刻
    		var du1 = Math.PI/180*45;
    		for(var i=0;i<8;i++){
    			ctx.beginPath();
    			ctx.moveTo(250,250);
    			ctx.lineWidth=1;
    			ctx.arc(250,250,200,i*du1,(i+1)*du1,false);
    			ctx.stroke();
    		}
    		// //继续遮盖圆
    		ctx.beginPath();
    		ctx.arc(250,250,170,0,Math.PI*2,false);
    		ctx.fill();

![70 2][]

4.画出各指针

![70 3][]

var date = new Date();
    		var hours = date.getHours();
    		var minutes = date.getMinutes();
    		var seconds = date.getSeconds();
    		console.log(hours,minutes,seconds);
    		if(hours>12){
    			hours=hours-12;
    		}	
    		//秒	
    		ctx.beginPath();
    		ctx.moveTo(250,250);
    		ctx.lineWidth=2;
    		ctx.strokeStyle="red";
    		ctx.arc(250,250,150,Math.PI/180*(seconds*6-90),Math.PI/180*(seconds*6-90),false);
    		ctx.stroke();
    		//分钟
    		ctx.beginPath();
    		ctx.moveTo(250,250);
    		ctx.lineWidth=3;
    		ctx.strokeStyle="pink";
    		ctx.arc(250,250,120,Math.PI/180*(minutes*6+(seconds*6/60)-90),Math.PI/180*(minutes*6+(seconds*6/60)-90),false);
    		ctx.stroke();
    		// 时钟
    		ctx.beginPath();
    		ctx.moveTo(250,250);
    		ctx.lineWidth=5;
    		ctx.strokeStyle="blue";
    		ctx.arc(250,250,100,Math.PI/180*(hours*30+(minutes*30/60)-90),Math.PI/180*(hours*30+(minutes*30/60)-90),false);
    		ctx.stroke();

[70]: /images/20210813/77eb4d884cb644f6a54c2a907efa98ba.png
[70 1]: /images/20210813/1a0b74ef540f4583ad8f2cc270d7add1.png
[70 2]: /images/20210813/0a0f3c2053984b4bb1600f5873551f2e.png
[70 3]: /images/20210813/60d69e0d51064c4b8b0e0f1b246f5872.png