Canvas绘制时钟

最新推荐文章于 2022-09-09 12:03:49 发布
最新推荐文章于 2022-09-09 12:03:49 发布
阅读量207 收藏 1
点赞数
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_40697723/article/details/84309657
版权

Canvas绘制时钟步骤如下：

  1. 首先绘制时钟的背景，包括小时数已经代表分钟的点。

 

 

	<style type="text/css">
	  div {
	    text-align: center;
	    margin-top: 150px;
	  }

	  #can {
	    border: 1px solid black;
	  }
	</style>
</head>
<body>
	<div>
	  <canvas id="can" width="200px" height="200px"></canvas>
	</div>
	<script type="text/javascript">
		var canvas = document.getElementById("can");
		var ctx = canvas.getContext("2d");
		var width = canvas.width;
		var height = canvas.height;
		var r = width / 2;

		//绘制时钟背景
		function drawBackground() {
		  ctx.translate(r, r);

		  //绘制时钟圆圈
		  ctx.beginPath();
		  ctx.arc(0, 0, r - 5, 0, Math.PI*2);
		  ctx.lineWidth = 10;
		  ctx.stroke();
          //绘制小时数
          var num = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
          ctx.font = "18px Arial";
          ctx.textAlign = "center";
          ctx.textBaseline = "middle";
          num.forEach(function(number, i) {
            var rad = (Math.PI * 2 / 12) * i;
            var x = Math.cos(rad) * (r - 30);
            var y = Math.sin(rad) * (r - 30);
            ctx.fillText(number, x, y);
          });
 	      //绘制分钟圆点
 		  for(let i = 0; i < 60; i++) {
 			var rad = (Math.PI * 2 / 60) * i;
 			var x = Math.cos(rad) * (r - 18);
 			var y = Math.sin(rad) * (r - 18);
 			ctx.beginPath();
 			ctx.arc(x, y, 2, 0, Math.PI * 2);
 			if (i % 5 === 0) {
 			  ctx.fillStyle = "#000";
 			} else {
 			  ctx.fillStyle = "#ccc";
 			}
 			  ctx.fill(); 
 			}

		}

		drawBackground();
	</script>
</body>

效果图:

 

2.绘制时针、分针、秒针，技巧是先让针指向十二点，然后通过旋转弧度来调整。

		//时针
		function drawHour(hour) {
			ctx.save();
			ctx.beginPath();
			ctx.moveTo(0, 10);
			ctx.lineTo(0, -r / 2);
			ctx.lineWidth = 6;
			ctx.lineCap = "round";
			ctx.stroke();
			ctx.restore();
		}

		drawBackground();
		drawHour(4);

先让它固定在12点，然后通过传入的hour计算弧度即可

		//时针
		function drawHour(hour) {
			ctx.save();
			var rad = (Math.PI * 2 / 12) * hour;
			ctx.rotate(rad);
			ctx.beginPath();
			ctx.moveTo(0, 10);
			ctx.lineTo(0, -r / 2);
			ctx.lineWidth = 6;
			ctx.lineCap = "round";
			ctx.stroke();
			ctx.restore();
		}

		drawBackground();
		drawHour(4);

效果图：

同理，分针和秒针的函数如下：

		//时针
		function drawHour(hour, minute) {
			ctx.save();
			var rad = (Math.PI * 2 / 12) * hour;
			//时针需要随着分针的转动而转动相应的角度
			var minuteRad = (Math.PI * 2 / 12 / 60) * minute;
			ctx.rotate(rad + minuteRad);
			ctx.beginPath();
			ctx.moveTo(0, 10);
			ctx.lineTo(0, -r / 2);
			ctx.lineWidth = 6;
			ctx.lineCap = "round";
			ctx.stroke();
			ctx.restore();
		}

		//分针
		function drawMinute(minute) {
			ctx.save();
			var rad = (Math.PI * 2 / 60) * minute;
			ctx.rotate(rad);
			ctx.beginPath();
			ctx.moveTo(0, 10);
			ctx.lineTo(0, -r + 30);
			ctx.lineWidth = 3;
			ctx.lineCap = "round";
			ctx.stroke();
			ctx.restore();
		}

		//秒针
		function drawSeconds(seconds) {
			ctx.save();
			var rad = (Math.PI * 2 / 60) * seconds;
			ctx.rotate(rad);
			ctx.beginPath();
			ctx.moveTo(2, 20);
			ctx.lineTo(-2, 20);
			ctx.lineTo(-1, -r + 18);
			ctx.lineTo(1, -r + 18);
			ctx.fillStyle = "red";
			ctx.fill();
		}
		drawBackground();
		drawHour(4, 30);
		drawMinute(30);
		drawSeconds(20);

效果图:

3.绘制时钟中心圆点

		//中心圆点
		function drawDot() {
			ctx.save();
			ctx.beginPath();
			ctx.arc(0, 0, 3, 0, Math.PI * 2);
			ctx.fillStyle = "#fff";
			ctx.fill();
			ctx.restore();
		}
		drawBackground();
		drawHour(4, 30);
		drawMinute(30);
		drawSeconds(40);
		drawDot();

效果图：

4.最后就是将时间作为参数传入

		//动态时间函数

		function drawTime() {
			var now = new Date();
			var hour = now.getHours();
			var minute = now.getMinutes();
			var seconds = now.getSeconds();
			drawBackground();
			drawHour(hour, minute);
			drawMinute(minute);
			drawSeconds(seconds);
			drawDot();
			ctx.restore();
		}
		drawTime();
		setInterval(drawTime, 1000);

效果图：

 

最终函数：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	  div {
	    text-align: center;
	    margin-top: 150px;
	  }

	  #can {
	    border: 1px solid black;
	  }
	</style>
</head>
<body>
	<div>
	  <canvas id="can" width="200px" height="200px"></canvas>
	</div>
	<script type="text/javascript">
		var canvas = document.getElementById("can");
		var ctx = canvas.getContext("2d");
		var width = canvas.width;
		var height = canvas.height;
		var r = width / 2;

		//绘制时钟背景
		function drawBackground() {
			ctx.save();
			ctx.clearRect(0, 0, width, height);
		  ctx.translate(r, r);
		  //绘制时钟圆圈
		  ctx.beginPath();
		  ctx.arc(0, 0, r - 5, 0, Math.PI*2);
		  ctx.lineWidth = 10;
		  ctx.stroke();
      //绘制小时数
      var num = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
      ctx.font = "18px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      num.forEach(function(number, i) {
        var rad = (Math.PI * 2 / 12) * i;
        var x = Math.cos(rad) * (r - 30);
        var y = Math.sin(rad) * (r - 30);
        ctx.fillText(number, x, y);
      });
 			//绘制分钟圆点
 			for(let i = 0; i < 60; i++) {
 			  var rad = (Math.PI * 2 / 60) * i;
 			  var x = Math.cos(rad) * (r - 18);
 			  var y = Math.sin(rad) * (r - 18);
 			  ctx.beginPath();
 			  ctx.arc(x, y, 2, 0, Math.PI * 2);
 			  if (i % 5 === 0) {
 			  	ctx.fillStyle = "#000";
 			  } else {
 			    ctx.fillStyle = "#ccc";
 			  }
 			  ctx.fill(); 
 			}
		}

		//时针
		function drawHour(hour, minute) {
			ctx.save();
			var rad = (Math.PI * 2 / 12) * hour;
			//时针需要随着分针的转动而转动相应的角度
			var minuteRad = (Math.PI * 2 / 12 / 60) * minute;
			ctx.rotate(rad + minuteRad);
			ctx.beginPath();
			ctx.moveTo(0, 10);
			ctx.lineTo(0, -r / 2);
			ctx.lineWidth = 6;
			ctx.lineCap = "round";
			ctx.stroke();
			ctx.restore();
		}

		//分针
		function drawMinute(minute) {
			ctx.save();
			var rad = (Math.PI * 2 / 60) * minute;
			ctx.rotate(rad);
			ctx.beginPath();
			ctx.moveTo(0, 10);
			ctx.lineTo(0, -r + 30);
			ctx.lineWidth = 3;
			ctx.lineCap = "round";
			ctx.stroke();
			ctx.restore();
		}

		//秒针
		function drawSeconds(seconds) {
			ctx.save();
			var rad = (Math.PI * 2 / 60) * seconds;
			ctx.rotate(rad);
			ctx.beginPath();
			ctx.moveTo(2, 20);
			ctx.lineTo(-2, 20);
			ctx.lineTo(-1, -r + 18);
			ctx.lineTo(1, -r + 18);
			ctx.fillStyle = "red";
			ctx.fill();
			ctx.restore();
		}

		//中心圆点
		function drawDot() {
			ctx.save();
			ctx.beginPath();
			ctx.arc(0, 0, 3, 0, Math.PI * 2);
			ctx.fillStyle = "#fff";
			ctx.fill();
			ctx.restore();
		}

		//动态时间函数

		function drawTime() {
			var now = new Date();
			var hour = now.getHours();
			var minute = now.getMinutes();
			var seconds = now.getSeconds();
			drawBackground();
			drawHour(hour, minute);
			drawMinute(minute);
			drawSeconds(seconds);
			drawDot();
			ctx.restore();
		}
		drawTime();
		setInterval(drawTime, 1000);
	</script>
</body>
</html>

 

 

 

 

 

HTML5 Canvas绘制时钟
06-01
NULL 博文链接：https://wenhai.iteye.com/blog/2158714
绘制走动的时钟
itscassie_的博客
09-18 1223
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;Title&lt;/title&gt;         &lt;style&gt;             body
利用Js中的canvas对象绘制简单的时钟代码
小翠学姐的博客
11-08 226
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;使用canvans绘制路径&lt;/title&gt; &lt;style&gt; &lt;/style&gt; &am
Canvas之绘制时钟
好好学习,天天向上
08-18 1389
用canvas画一个时钟玩玩吧，比css+js简单太多了……
利用canvas画一个简单的时钟
qq_45931327的博客
06-15 286
canvas时钟
JavaScript Canvas绘制时钟
最新发布
02-22
接着，我们分别创建了`drawHourHand`、`drawMinuteHand`和`drawSecondHand`函数来绘制时钟的指针，这些函数会根据当前时间计算出对应的角度。`drawHand`是绘制指针的通用函数，它接受角度、长度、线宽和线帽样式作为...
JS+Canvas绘制时钟效果
10-22
总结来说，使用JavaScript和Canvas绘制时钟涉及的关键技术有：获取和设置Canvas上下文、时间的处理、坐标变换、路径绘制和线条样式控制。通过熟练掌握这些技术，你可以创建出各种复杂的图形和动画效果。
javascript+HTML5 canvas绘制时钟功能示例
10-17
### JavaScript + HTML5 canvas 绘制时钟功能知识点解析 #### HTML5 canvas 基础知识 HTML5 canvas 元素提供了一种通过JavaScript和它的Canvas绘图API来绘制图形的方式。一个 canvas 是一个矩形区域，可以通过脚本...
JavaScript html5 canvas绘制时钟效果(二)
10-22
HTML5的canvas除了可以用于绘制时钟效果，还可以用于制作各种各样的图形和动画，比如制作图表、动画小游戏等。这种技术已经成为前端开发中不可或缺的一部分，熟练掌握它能够帮助开发者制作出更加丰富和动态的网页...
canvas 绘制时钟 ……
QDY5945的博客
11-12 157
相当的困难 <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>clock</title> <sty...
canvas绘制时钟
01-29
利用html5中的canvas绘制的时钟，动态的呈现当前的时分秒
使用canvas绘制时钟
NanChen的博客
09-09 557
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。
canvas绘制简单时钟
Ccc_bk的博客
07-29 182
canvas绘制简单时钟
Canvas绘制一个时钟
秃头小桂子
05-11 2356
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
用canvas画时钟（一步步详解附带源代码）
yf19990720的博客
07-15 6545
canvas绘制时钟，结合了js和canvas，让canvas所绘制的不再只是静止不动的画。希望大家在阅读完之后，有更简单的绘制方法，请在评论区留言，谢谢。
canvas绘制时钟表盘
djz917的博客
06-08 2114
关于canvas的API操作详情请阅读文档https://www.runoob.com/html/html5-canvas.html先来看下效果图：首先，需要绘制两个圆形作为表盘var drawing=document.getElementById("drawing"); var context=drawing.getContext("2d"); context.beginPath(); //绘...
使用canvas绘制风景时钟
think_you_WL的博客
12-19 1513
风景时钟 实现代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .content{ width: 600px; height: 600px; border
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></canvas> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值