利用canvas画一个钟表（时分秒联动）

canvas

前段时间做微信小程序项目，用到了微信canvas组件生成分享海报，很多东西都生疏了，就想着复习一下canvas的常用知识做一个clock出来。查阅canvas技术文档和相关资料，现将自己整理的代码和自己的理解记录在此，加深记忆，方便以后查阅。也希望有能看到本文的各位朋友批评指正。

代码之前先上效果图吧
代码扑面而来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布-钟表</title>
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    </style>
</head>
<body>
	<canvas id='clock' width='600' height='600' style="margin: 150px;"></canvas>
<script>                                         
	var canvas = document.getElementById('clock');
	const cxt = canvas.getContext('2d');
	var width = canvas.width;
	var height = canvas.height;
	var r = width / 2;
	function drawBg() { //画背景(表盘)
		//重置原点
		cxt.save();//保存当前状态
	  	cxt.translate(r,r);//重置坐标原点

  		//画时钟外圈
		cxt.beginPath();//开始绘制
		cxt.arc(0, 0, r-8, 0, 2*Math.PI,true);//创建弧/曲线（用于创建圆或部分圆）
		cxt.lineWidth = 8;//线宽
		cxt.stroke();//路径(空心)
		//画小时数
		let  hour = [3,4,5,6,7,8,9,10,11,12,1,2];//弧的圆形的3点钟位置是 0 度
		//rad弧度：弧长与半径比 那么一个圆的弧度为2π，1弧度的弧长为半径
		//1°的弧长为2πr/360,那么1°的弧度为2π/360
		//360°/12 = 30° 数学公式正弦sin(角度),js则是sin(弧度),所以要计算出弧度
		// ↓ 小时数之间的弧度为 2π÷12 ↓
		let  hour_rad = 2*Math.PI/12;//小时数之间的弧度间隔
		cxt.font = "40px sans-serif";//字体
		cxt.textAlign = "center";//左右居中
    	cxt.textBaseline = "middle";//上下居中
    	
		let r1 = r - 65;//减短长度,让内容收到圆圈内部
		let r2 = r - 23;//减短长度,让内容收到圆圈内部
		//循环依次画出12个数字（从3点开始）
		for(var i in hour){
			cxt.fillStyle = "#000"
			cxt.fillText(hour[i],r1*Math.cos(i*hour_rad),r1*Math.sin(i*hour_rad))
		}
		//画刻度(圆点)
		let minute_rad = 2*Math.PI/60;//分钟之间的间隔弧度
		for(i = 0; i <= 60; i ++) {
			let x = r2*Math.cos(i*minute_rad);
			let y = r2*Math.sin(i*minute_rad);
			cxt.beginPath();
			if(i % 15 == 0){//每刻钟位置
				cxt.fillStyle = "red";//文本字体颜色
				cxt.arc(x ,y , 5, 0, 2*Math.PI, true);
			}
			else if(i % 5 == 0){//整点位置
				cxt.fillStyle = "#000";
				cxt.arc(x ,y , 4, 0, 2*Math.PI, true);
			}
			else{//普通位置
				cxt.fillStyle = "#bbb";
				cxt.arc(x ,y , 3, 0, 2*Math.PI, true);
			}
			cxt.fill();//填充(实心)
		}
		//画时钟内圈
		cxt.beginPath();
		cxt.arc(0, 0, r-32, 0, 2*Math.PI,true);
		cxt.lineWidth = 3;
		cxt.stroke();//线条、线性路径
	}
	
	//画时针
	function drawHour(hour,minute,second) {
		cxt.save();//保存当前
	  	var rad = 2 * Math.PI * ( hour/12 + minute/720 + second/43200);

	  	cxt.beginPath();
	  	cxt.rotate(rad);//旋转角度
	  	cxt.moveTo(0, 10);
	  	cxt.lineTo(0, -r/2);
	  	cxt.lineWidth = 10;
	  	cxt.lineCap = "round";//线段末端样式
	  	cxt.stroke();
	  	cxt.restore();//恢复上一步保存的状态
	}
	
	//画分针
	function drawMinute(minute,second) {
	  cxt.save();
	  var rad = 2 * Math.PI * (minute/60 + second/3600);
	  cxt.beginPath();
	  cxt.rotate(rad);//旋转角度
	  cxt.moveTo(0, 15);
	  cxt.lineTo(0, -r/1.5);
	  cxt.lineWidth = 6;
	  cxt.lineCap = "round";
	  cxt.stroke();
	  cxt.restore();
	}
	
	// 画秒针
	function drawSecond(second) {
	  cxt.save();
	  var rad = 2 * Math.PI * (second / 60) ;
	  cxt.beginPath();
	  cxt.rotate(rad);
	  cxt.moveTo(0, 25);
	  cxt.lineTo(2, 25);
	  cxt.lineTo(-2, 25);
	  cxt.lineTo(-1, -r/1.25);
	  cxt.lineTo(1, -r/1.25);
	  cxt.lineTo(2, 25);
	  cxt.lineWidth = 2;
	  cxt.fillStyle = "#f00";
	  cxt.fill();
	  cxt.restore();
	}
	
	// 画中心点
	function drawDot() {
	  cxt.beginPath();
	  cxt.arc(0, 0, 8, 0, 2*Math.PI,true);
	  cxt.fillStyle = "red";
	  cxt.fill();
	}
	
	//把所有方法每秒调用一下,表就走起来了
	setInterval(function(){
		//获取时分秒
		let second = new Date().getSeconds();
		let minute = new Date().getMinutes();
		let hour = new Date().getHours();
		cxt.clearRect(0, 0, width, height);//每次清除所有
		//再重新画出所有
		drawBg();//表盘 数字 刻度
		drawHour(hour,minute,second);//时针
		drawMinute(minute,second);//分针
		drawSecond(second);//秒针
		drawDot();//中心圆点
		cxt.restore();
	},1000)
</script>
</body>
</html>

小结：

计算刻度位置坐标时用到了js中Math对象的sin()和cos()方法，它们用到的是弧度rad参数，而不是角度，所以应先理解弧度的概念及圆周的弧度与角度的关系。可参考 百度百科=>弧度

利用canvas画一个钟表（时分秒联动）

利用canvas画一个钟表（时分秒联动）

canvas

小结：

相关推荐