Canvas绘制大时钟

创建canvas标签

<canvas width="500" height="500" class="canvas"></canvas>

绘制圆刻度和时间
arc(x, y, r, start, stop)

x, y, r : 分别是圆的圆心坐标和半径。

start：起始角，以弧度计

stop : 结束角，以弧度计

角度和弧度的关系式：指针的角度 * Math.PI / 180 = 弧度。

时钟一圈分为12个小时，60分钟，60秒。所以30°一小时，6°一分钟， 6°一秒。

理所应当的指针的角度 = 时间 * 对应的角度即可得到我们所需的时间，但是我们这个计算方式是以0°在时钟的12点钟为基准的。

canvas里的0°的地方是在时钟的三点钟方向

var canvas = document.getElementsByClassName('canvas')[0];//找到canvas
		var r = canvas.width / 2; //找到圆的半径
		var c = canvas.getContext('2d'); //创建context对象
		
		var arr = [3,4,5,6,7,8,9,10,11,12,1,2];//将时间传进数组
		function fun(){ //绘画圆
			c.save(); //保存当前环境的状态
			c.beginPath(); //起始路径
			c.lineWidth = 10; //设置线条宽度
			c.translate(r,r) //将圆心坐标设置成中心点
			c.arc(0,0,r - 5,0,Math.PI * 2); //绘制圆形
			c.stroke(); //绘制已经定义的路径



			for(var i = 0; i < arr.length; i++){ //画时间
				var a =2 * Math.PI / 12 * i; //每一个时间的弧度
				var x = Math.cos(a) * (r-30); //X轴的坐标
				var y = Math.sin(a) * (r-30);//Y轴的坐标
				c.font = '20px Arial'; //设置字体大小
				c.textAlign = 'center'; //文字左右居中
				c.textBaseline = 'middle'; //文字上下居中
				c.fillText(arr[i],x,y)	//将数组的每一项画出来
			}
		}; 
		function kd(){ //画刻度
			for(var i = 0; i < 60; i++){
				var rad = 2 * Math.PI / 60 * i; //每一个刻度的弧度
				var x = Math.cos(rad) * (r-15); //X轴的坐标
				var y = Math.sin(rad) * (r-15);//Y轴的坐标
				c.beginPath();//起始路径
				if (i % 5 == 0) { //每个小时上的刻度
					c.fillStyle = '#000'
					c.arc(x,y,2,0,2*Math.PI,false)
				}else{ //每秒上的刻度
					c.fillStyle = '#ccc'
					c.arc(x,y,2,0,2*Math.PI,false)
				}
				c.fill();
			}
		}

然后绘制时针分针和秒针

为了模拟真实的时针的走动（即分针走一分钟，时针也跟着走一点点，而不是走完60分钟时针才走一格），

只需要在计算时针角度的时候加上分钟的一半（60/2=30，刚好是时针一格的度数）。

function sz(hour, minute){ //时针
			c.save(); //保存当前的环境状态
			var rad =  2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * minute / 60; //分针影响时针的走动
			c.beginPath(); //起始
			c.rotate(rad); //旋转绘图达到走动效果
			c.moveTo(0,15);//把路径移动到画布中的指定点，不创建线条
			c.lineTo(0,-r/2);//创建线条
			c.lineWidth = 7; //线条宽度
			c.lineCap = 'round' //线条头部的样式 
			c.stroke(); //绘制定义的路径
			c.restore(); //返回之前保存过的路径状态和属性
		}

		function fz(minute){ //分针 与时针大体相同
			c.save(); //保存当前的环境状态
			var rad =  2 * Math.PI / 60 * minute; //弧度
			c.beginPath(); //起始
			c.rotate(rad); //旋转
			c.moveTo(0,15);
			c.lineTo(0,-r+70);
			c.lineWidth = 5;
			c.lineCap = 'round'
			c.stroke();
			c.restore();//返回之前保存过的路径状态和属性
		}
		function mz(second){ //秒针
			c.save();   //保存当前的环境状态
		    var rad = 2 * Math.PI / 60 * second;
		    c.beginPath();//起始
		    c.rotate(rad);//旋转
		    c.moveTo(0, 25);
		    c.lineTo(0, 25);
		    c.lineTo(-2, 25);
		    c.lineTo(-1, -r + 25);
		    c.lineTo(1, -r + 25);
		    c.lineTo(2, 25); //绘制线条
		    c.lineWidth = 1;
		    c.fillStyle = "#f00"; //线条颜色
		    c.fill(); //填充线条
		    c.restore(); //返回之前保存过的路径状态和属性
		};
		function drawDot(){ //绘制圆心
			c.beginPath(); //开始
			c.fillStyle = '#0f0' //圆心颜色
			c.arc(0,0,8,0,Math.PI * 2);
			c.fill(); //填充
		}

最后为了让时钟动起来获得本地的时间

以定时器的方式没秒运行一次(每次运行之前需要清空画布不然指针会布满时钟)

function draw(){ //获取当前日期
			c.clearRect(0, 0, 500, 500); //每运行之前清空画布一次
			var date = new Date(); //获取日期
			var hour = date.getHours(); //当前小时
			var minute = date.getMinutes();//当前分针
			var second = date.getSeconds();//当前秒


			fun();
			kd();
			sz(hour,minute);
			fz(minute);
			mz(second);
			drawDot();
			c.restore(); //返回之前保存过的路径状态和属性
		};
		draw();  //打开浏览器运行一次
		setInterval(draw, 1000); //每隔一秒执行一次

本文地址：https://blog.csdn.net/Unfortunatelyif/article/details/107345200

Canvas绘制大时钟

相关推荐