canvas绘制指针时钟

最新推荐文章于 2022-09-23 20:52:30 发布

dbd157513

最新推荐文章于 2022-09-23 20:52:30 发布

阅读量130

点赞数

文章标签： python

原文链接：http://www.cnblogs.com/dhygzh/p/4815254.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas时钟</title>
</head>
<body>
	<canvas id="c" width="300" height="300"></canvas>
	<script>
		var a_canvas = _$('c'),
			w = a_canvas.width,
			h = a_canvas.height;
		var ctx = a_canvas.getContext('2d');

		/*绘制外边框*/
		ctx.lineWidth = 1;
		ctx.strokeStyle = '#000000';
		ctx.strokeRect(0, 0, a_canvas.width, a_canvas.height);

		/*把坐标移至矩形中心将大大方便后面角度计算*/
		ctx.translate(w/2, h/2);

		drawClock(ctx);

		function drawClock(context){
			/*重置画面*/
			context.clearRect(-w/2 + 1, -h/2 + 1, w - 2, h -2);

			/*时钟外环*/
			var r = (w > h ? h/2 : w/2) - 2;
			var len = 0.85 * r;
			var px, py;
			context.beginPath();
			context.arc(0, 0, r, 0, 2*Math.PI);
			context.lineWidth = 2;
			context.strokeStyle = '0000ff';
			context.stroke();

			/*绘制时钟数字*/
			context.font = '14px Arial';
			context.fillStyle = 'black';
			context.textAlign = 'center';
			context.textBaseline = 'middle';
			for(var i = 0; i < 12; i++){
				px = len * Math.cos((3 - i) * 2 * Math.PI / 12);
				py = -len * Math.sin((3 - i) * 2 * Math.PI / 12);
				
				context.fillText(i === 0 ? 12 : i, px, py);
			}


			/*绘制时钟指针*/
			var date = new Date;
			var timeObj = {
				hour: date.getHours(),
				minute: date.getMinutes(),
				seconds: date.getSeconds()
			};
			/*flag 1,2,3分别代表时针、分针、秒针*/
			drawHand(context, timeObj, len, 1);
			drawHand(context, timeObj, len, 2);
			drawHand(context, timeObj, len, 3);

			setTimeout(function(){
				drawClock(context);
			}, 1000);
		}

		/*getElementById封装*/
		function _$(anchor){
			if(typeof anchor !== 'string') return;
			return document.getElementById(anchor);
		}
		
		/*绘制时钟指针的函数*/
		function drawHand(context, timeObj, len, flag){
			var config = {};
			switch(flag){
				case 1:
					var hour = timeObj.hour <= 12 ? timeObj.hour : timeObj.hour - 12,
						minu = timeObj.minute,
						len = len * 0.6,
						angle = 2 * Math.PI * (3 - (hour + minu/60)) / 12;
					config = {
						px: len * Math.cos(angle),
						py: -len * Math.sin(angle),
						lineWidth: 4
					};
					break;
				case 2:
					var minu = timeObj.minute,
						sec = timeObj.seconds,
						len = len * 0.75,
						angle = 2 * Math.PI * (15 - (minu + sec/60)) / 60;
					config = {
						px: len * Math.cos(angle),
						py: -len * Math.sin(angle),
						lineWidth: 3
					};
					break;
				case 3:
					var sec = timeObj.seconds,
						len = len * 0.8,
						angle = 2 * Math.PI * (15 - sec) / 60;
					config = {
						px: len * Math.cos(angle),
						py: -len * Math.sin(angle),
						lineWidth: 2
					};
					break;
			}

			context.beginPath();
			context.moveTo(0, 0);
			context.lineTo(config.px, config.py);
			context.lineWidth = config.lineWidth;
			context.strokeStyle = '#000000';
			context.stroke();

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

转载于:https://www.cnblogs.com/dhygzh/p/4815254.html

dbd157513

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制指针时钟

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas时钟</title></head><body> <canvas id="c" width="300" hei...
复制链接

扫一扫