Canvas画布实现自定义时钟效果

Posted HandsomeHan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas画布实现自定义时钟效果相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
	*{margin:0; padding:0; list-style:none;}
	.box{
		width: 420px;
		height: 420px;
		margin: 50px auto 0;
	}
	#cvs{
		background: #B1A6BE;
	}
</style>
</head>
<body>

	<div class="box">
		<canvas id="cvs" width="420" height="420"></canvas>
	</div>
	
<script>
var cvs=document.getElementById(‘cvs‘);
var ctx=cvs.getContext(‘2d‘);
clock();
setInterval(clock,1000);
function clock(){
	var img=document.createElement(‘img‘);
	img.src=‘01.jpg‘;
	//时钟背景图
	// img.onload=function (){
		ctx.beginPath();
		ctx.drawImage(img,0,0,420,420);
		ctx.closePath();
	// }
	//时钟外圆
	ctx.beginPath();
	ctx.arc(210,210,200,0,2*Math.PI,true);
	ctx.strokeStyle=‘#60D9F8‘;
	ctx.lineWidth=10;
	ctx.stroke();
	ctx.clip();
	ctx.closePath();

	//分刻度 360/60=6
	for (var i = 0; i < 60; i++) {
		ctx.save();//保存状态
		ctx.beginPath();
		ctx.translate(210,210);
		ctx.rotate(i*6*Math.PI/180);
		ctx.strokeStyle=‘#FEF319‘;
		ctx.lineWidth=5;
		ctx.moveTo(0,-185);
		ctx.lineTo(0,-195);
		ctx.stroke();
		ctx.closePath();
		ctx.restore();//恢复之前保存的状态
	};

	//时刻度 360/12=30
	for (var i = 0; i < 12; i++) {
		ctx.save();//保存状态
		ctx.beginPath();
		ctx.translate(210,210);
		ctx.rotate(i*30*Math.PI/180);
		ctx.strokeStyle=‘#60D9F8‘;
		ctx.lineWidth=8;
		ctx.moveTo(0,-175);
		ctx.lineTo(0,-195);
		ctx.stroke();
		ctx.closePath();
		ctx.restore();//恢复之前保存的状态
	};

	//获取当前时间
	var dates=new Date();
	var h=dates.getHours();
	var m=dates.getMinutes();
	var s=dates.getSeconds();
	h=h+m/60;//12.5小时
	m=m+s/60;

	//画时间
	var h2=dates.getHours();
	var m2=dates.getMinutes();
	var str1=h2>9?h2:‘0‘+h2;
	var str2=m2>9?m2:‘0‘+m2;
	var str=str1+‘:‘+str2;// 09:05
	ctx.beginPath();
	ctx.font=‘26px 微软雅黑‘;
	ctx.fillStyle=‘#5BDA40‘;
	ctx.fillText(str,180,340);
	ctx.closePath();

	//时针
	ctx.save();//保存状态
	ctx.beginPath();
	ctx.translate(210,210);
	ctx.rotate(h*30*Math.PI/180);
	ctx.strokeStyle=‘#60D9F8‘;
	ctx.lineWidth=8;
	ctx.moveTo(0,14);
	ctx.lineTo(0,-130);
	ctx.stroke();
	ctx.closePath();
	ctx.restore();//恢复之前保存的状态

	//分针
	ctx.save();//保存状态
	ctx.beginPath();
	ctx.translate(210,210);
	ctx.rotate(m*6*Math.PI/180);
	ctx.strokeStyle=‘#FEF319‘;
	ctx.lineWidth=5;
	ctx.moveTo(0,14);
	ctx.lineTo(0,-150);
	ctx.stroke();
	ctx.closePath();
	ctx.restore();//恢复之前保存的状态

	//秒针
	ctx.save();//保存状态
	ctx.beginPath();
	ctx.translate(210,210);
	ctx.rotate(s*6*Math.PI/180);
	ctx.strokeStyle=‘#FB1F11‘;
	ctx.lineWidth=3;
	ctx.moveTo(0,14);
	ctx.lineTo(0,-170);
	ctx.stroke();
	ctx.closePath();

	//秒针上的圆
	ctx.beginPath();
	ctx.fillStyle=‘#FEF319‘;
	ctx.strokeStyle=‘#FB1F11‘;
	ctx.lineWidth=3;
	ctx.arc(0,-155,5,0,2*Math.PI,true);
	ctx.fill();
	ctx.stroke();
	ctx.closePath();

	//中心圆
	ctx.beginPath();
	ctx.fillStyle=‘#FEF319‘;
	ctx.strokeStyle=‘#FB1F11‘;
	ctx.lineWidth=3;
	ctx.arc(0,0,8,0,2*Math.PI,true);
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	ctx.restore();//恢复之前保存的状态


}
</script>
</body>
</html>

　　

以上是关于Canvas画布实现自定义时钟效果的主要内容，如果未能解决你的问题，请参考以下文章

H5--canvas实现粒子时钟

利用canvas画一个动态时钟

教你实现一个朴实的Canvas时钟效果

自定义View中改变画布（canvas）状态在画图

Android自定义万能Canvas画布

canvas实现的时钟效果