使用Canvas画板和原生JS绘制逼真的机械时钟

最新推荐文章于 2022-07-28 17:30:39 发布
最新推荐文章于 2022-07-28 17:30:39 发布
阅读量425 收藏 2
点赞数 1
分类专栏： JavaScript JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyar1225/article/details/87099051
版权

1.Canvas画板标签
html结构:

<div id="container">
		<canvas id="watch" width="600" height="600"></canvas>
	</div>

css部分:

div#container{
			width: 600px;
			height: 600px;
			margin: 150px auto;
			border:  1px solid #000;
		}

2.JavaScript AIP绘制图形

  • 创建Canvas 2D环境
//获取画板
var watch = document.querySelector('#watch');
//创建2D环境
var ctx = watch.getContext('2d');
//设置宽高
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;

3.绘制表盘最外层圆环

function drawBackground() {
		//保存当前图像状态
		ctx.save();
		//绘制坐标
		ctx.translate(r,r);
		//创建路径
		ctx.beginPath();
		//设置外层表盘宽度
		ctx.lineWidth = 30;
		//设置外层表盘的边框颜色
		ctx.strokeStyle = '#ccc';
		//设置外层表盘形状为圆形
		ctx.arc(0,0,r-15,0,2 * Math.PI,false);
		//绘制路径并显示
		ctx.stroke();
	}

在这里插入图片描述
4.绘制表盘背景

ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(0, 0, r - 30, 2 * Math.PI, false);
ctx.fill();

5.绘制表盘数字

//创建储存时钟数字的数组
			var hourNums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
			//设置数字颜色
			ctx.fillStyle = '#fff';
			设置数字字体大小
			ctx.font = '30px Arial';
			//让数字在表盘内对齐居中显示
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			//遍历数组中的数字
			for(var i in hourNums) {
				var hour = hourNums[i];
				var radius = 2 * Math.PI / 12 * i;
				var x = Math.cos(radius) * (r - 55);
				var y = Math.sin(radius) * (r - 55);
				ctx.beginPath();
				ctx.fillText(hour, x, y);
			}

在这里插入图片描述
6.绘制表盘刻度

for(var i = 0; i < 60; i++) {
				var radius = 2 * Math.PI / 60 * i;
				var x = Math.cos(radius) * (r - 80);
				var y = Math.sin(radius) * (r - 80);

				ctx.beginPath();

				if(i % 5 === 0) {
					var round_r = 5;
					ctx.fillStyle = '#cc5547';
				} else {
					var round_r = 3;
					ctx.fillStyle = '#999';

				}
				ctx.arc(x, y, 5, 2 * Math.PI, false);
				ctx.fill();
			}

在这里插入图片描述
7.绘制时钟

function drawHour(hour, minute) {
			ctx.save();
			ctx.beginPath();
			var radius = 2 * Math.PI / 12 * hour;
			var m_radius = 2 * Math.PI / 12 / 60 * minute;
			ctx.strokeStyle = '#ccc'
			ctx.lineCap = 'round';
			ctx.lineWidth = 20;
			ctx.rotate(radius + m_radius);
			ctx.moveTo(0, 40);
			ctx.lineTo(0, -r / 2);
			ctx.stroke();
			ctx.restore();
		}

在这里插入图片描述
8.绘制分钟

function drawMinute(minute) {
			ctx.save();
			ctx.beginPath();
			var radius = 2 * Math.PI / 60 * minute;
			ctx.strokeStyle = '#ccc'
			ctx.lineCap = 'round';
			ctx.lineWidth = 15;
			ctx.rotate(radius);
			ctx.moveTo(0, 40);
			ctx.lineTo(0, -r + 80);
			ctx.stroke();
			ctx.restore();
		}

在这里插入图片描述
9.绘制秒钟

function drawSecond(second){
			ctx.save();
			ctx.beginPath();
			var radius = 2*Math.PI / 60 * second;
			ctx.strokeStyle = 'red';
			ctx.lineCap = 'round';
			ctx.lineWidth = 5;
			ctx.rotate(radius);
			ctx.moveTo(0,40);
			ctx.lineTo(0, -r + 80);
			ctx.stroke();
			ctx.restore();
		}

在这里插入图片描述
10.绘制中心定位圆点

function drawCentralRound(){
			ctx.save();
			ctx.beginPath();
			ctx.fillStyle = '#fff';
			ctx.arc(0,0,20,0, 2 * Math.PI,false);
			ctx.fill();
			ctx.restore();
		}

在这里插入图片描述
11.编写时钟动态方法

function draw() {
			ctx.clearRect(0,0,width,height);
			var time = new Date();
			var hour = time.getHours();
			var minute = time.getMinutes();
			var second = time.getSeconds();
			drawBackground();
			drawHour(hour, minute);
			drawMinute(minute);
			drawSecond(second);
			drawCentralRound();
			ctx.restore();
		}
		draw();		
		setInterval(draw,1000);

完成后的效果如下:
在这里插入图片描述
所有的源码如下;

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>canvas绘制逼真的机械时钟</title>
		<style type="text/css">
			div#container {
				width: 600px;
				height: 600px;
				margin: 150px auto;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<canvas id="watch" width="600" height="600"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		var watch = document.querySelector('#watch');
		var ctx = watch.getContext('2d');
		var width = ctx.canvas.width;
		var height = ctx.canvas.height;
		var r = width / 2;

		draw();
		
		setInterval(draw,1000);
		function drawBackground() {
			//保存当前图像状态
			ctx.save();
			//绘制坐标
			ctx.translate(r, r);
			//创建路径
			ctx.beginPath();
			//设置外层表盘宽度
			ctx.lineWidth = 30;
			//设置外层表盘的边框颜色
			ctx.strokeStyle = '#ccc';
			//设置外层表盘形状为圆形
			ctx.arc(0, 0, r - 15, 0, 2 * Math.PI, false);
			//绘制路径并显示
			ctx.stroke();

			ctx.beginPath();
			ctx.fillStyle = '#000';
			ctx.arc(0, 0, r - 30, 2 * Math.PI, false);
			ctx.fill();

			//创建储存时钟数字的数组
			var hourNums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
			//设置数字颜色
			ctx.fillStyle = '#fff';
			//设置数字字体大小
			ctx.font = '30px Arial';
			//让数字在表盘内对齐居中显示
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			//遍历数组中的数字
			for(var i in hourNums) {
				var hour = hourNums[i];
				var radius = 2 * Math.PI / 12 * i;
				var x = Math.cos(radius) * (r - 55);
				var y = Math.sin(radius) * (r - 55);

				ctx.beginPath();
				ctx.fillText(hour, x, y);
			}
			for(var i = 0; i < 60; i++) {
				var radius = 2 * Math.PI / 60 * i;
				var x = Math.cos(radius) * (r - 80);
				var y = Math.sin(radius) * (r - 80);

				ctx.beginPath();

				if(i % 5 === 0) {
					var round_r = 5;
					ctx.fillStyle = '#cc5547';
				} else {
					var round_r = 3;
					ctx.fillStyle = '#999';

				}
				ctx.arc(x, y, 5, 2 * Math.PI, false);
				ctx.fill();
			}
		}

		function drawHour(hour, minute) {
			ctx.save();
			ctx.beginPath();
			var radius = 2 * Math.PI / 12 * hour;
			var m_radius = 2 * Math.PI / 12 / 60 * minute;
			ctx.strokeStyle = '#ccc'
			ctx.lineCap = 'round';
			ctx.lineWidth = 20;
			ctx.rotate(radius + m_radius);
			ctx.moveTo(0, 40);
			ctx.lineTo(0, -r / 2);
			ctx.stroke();
			ctx.restore();
		}

		function drawMinute(minute) {
			ctx.save();
			ctx.beginPath();
			var radius = 2 * Math.PI / 60 * minute;
			ctx.strokeStyle = '#ccc'
			ctx.lineCap = 'round';
			ctx.lineWidth = 15;
			ctx.rotate(radius);
			ctx.moveTo(0, 40);
			ctx.lineTo(0, -r + 80);
			ctx.stroke();
			ctx.restore();
		}

		function drawSecond(second) {
			ctx.save();
			ctx.beginPath();
			var radius = 2 * Math.PI / 60 * second;
			ctx.strokeStyle = 'red';
			ctx.lineCap = 'round';
			ctx.lineWidth = 5;
			ctx.rotate(radius);
			ctx.moveTo(0, 40);
			ctx.lineTo(0, -r + 80);
			ctx.stroke();
			ctx.restore();
		}

		function drawCentralRound() {
			ctx.save();
			ctx.beginPath();
			ctx.fillStyle = '#fff';
			ctx.arc(0, 0, 20, 0, 2 * Math.PI, false);
			ctx.fill();
			ctx.restore();
		}

		function draw() {
			
			ctx.clearRect(0,0,width,height);
		
			var time = new Date();
			var hour = time.getHours();
			var minute = time.getMinutes();
			var second = time.getSeconds();
			
			drawBackground();
			drawHour(hour, minute);
			drawMinute(minute);
			drawSecond(second);
			drawCentralRound();
			ctx.restore();
		}
	</script>

</html>
格桑花念
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于canvas和原生js实现的手画板
08-29
基于canvas和原生js实现的手画板，支持插入文字（渐变、旋转等等），还可以把自己完成的作品以png的格式下载下来，功能强大
使用js和canvas实现时钟效果
11-19
使用js和canvas写一个时钟，供大家参考，具体内容如下 <!DOCTYPE html>` <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
js写时间
m0_61749828的博客
03-12 436
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
JS实现机械时钟
欢欢的博客
03-17 367
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 样式 */ * { padding: 0; margin: 0; }
JavaScript - 机械表 and 电子表 and 随机颜色切换 - 简单实现
LIN的博客
10-22 201
机械表+电子表.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;机械表+电子表&lt;/title&gt; &lt;!-- 机械表 --&gt; &lt;style&gt
js绘制时钟
09-15 224
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Canvas绘制时钟Demo</title> <style> #myCanvas{ ...
JavaScript制作网页时钟
cashAAone的博客
07-26 1668
javascript 运用时间戳实现时间获取并换算成时分秒,并结合css相关属性实现时钟转动
JavaScript Canvas绘制时钟
最新发布
02-22
在这个场景中，我们将深入探讨如何使用JavaScript和Canvas API来创建一个实时更新的时钟。 首先，我们需要在HTML中创建一个`<canvas>`元素，它是JavaScript画布的基础： ```html <!DOCTYPE html> <title>...
使用canvas绘制超炫时钟
09-28
在本文中，我们将深入探讨如何使用HTML5的canvas元素绘制一个炫酷的时钟。canvas是HTML5的一个重要特性，允许开发者在网页上进行动态图形渲染。以下将详细讲解实现这个超炫时钟的步骤、关键代码以及涉及的数学原理。...
原生js制作的canvas画板
06-01
总结起来，这个原生js制作的canvas画板项目展示了如何使用JavaScript和HTML5的Canvas API创建一个互动式的绘画工具，同时考虑到了移动端的兼容性，让用户无论在桌面还是移动设备上都能享受绘画的乐趣。这个项目对于...
js实现机械表
12-28
机械表 js html css
JS实现的简易时钟
07-28
自己截的图，略显粗糙，代码简单，适合初学者
自制小画布工具（HTML5+JS）
08-04
自制小画布，画笔，HTML5/canvas + JS 效果很炫，支持画笔切换，橡皮擦，画笔粗细等
jQuery+CSS3劳力士手表特效特效代码
03-20
jQuery+CSS3劳力士手表特效是一款jQuery基于css3绘制的精美劳力士机械手表动画特效。
js实现时钟
qq_41743601的博客
07-11 3715
用js写一个时钟 我这个是仿造别人写的。当我拿到别人代码的时候有很多地方都不明白为什么要这么写。但通过自己一步步分析，加深百度最后终于解决了问题。就是关于canvas的save()和restore()还是有点不明白。虽然看了解释但还是没能真正体会它的用处，可能后续还需要多加体会才能够理解吧。虽然这是仿造别人的，但是我希望通过写下这个博客来记录自己的学习经历。希望大家多多指教。 代码部分，其中都有详细的解释。 <!DOCTYPE html> <html lang="en">
原生JS结合canvas写的一套画板,能修改画笔粗细,能修改画笔颜色,能清空画板等一系列功能
qq_52619560的博客
07-28 1241
2.用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标移动的位置,到最后鼠标松开的位置.再根据鼠标的移动轨迹进行画线.3.源码中封装了两个函数,line()函数是画布的一系列画线方法,change()函数是监听的鼠标移动轨迹,轨迹结合画线方法,完成画板的绘画功能.在鼠标轨迹的监听事件中,鼠标松开的事件里.要将之前的鼠标事件值为空,这样鼠标松开之后,才不会妨碍后续鼠标事件的执行.//封装函数功能监听鼠标的移动轨迹。//封装函数功能画线。...
原生JS实现canvas移动端电子签名板/画板
haozi的博客
04-28 3161
最近做一个移动端项目, 有电子签名功能, 生产PNG格式上传服务器, 而且需要横屏签名, 这需要注意移动端的横屏后宽高的变化, 以下是JS核心部分
分别利用html+js和canvas绘制时钟
骑着代码去流浪
12-21 1695
分别利用原生JS和画布画出时钟 1.原生JS绘制始终 思路： 1）在body中构建好始终的静态DOM结构 2）在CSS中设置好DOM结构的样式 3）在js文件中设置DOM的运动样式 视图文件： 1 2 3 4 5 6 7 8 9 10 11
使用Canvas制作画图工具
weixin_34060299的博客
11-15 601
  前  言 JRedu 　canvas是HTML5中重要的元素之一，canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，我们可以控制其每一个元素，并且canvas拥有多种的绘制路径、矩形、圆形、字符以及添加图像的方法。 这一章我们使用canvas来做一个画图工具，并且支持下载图片功能。   最终实现界面 最终实现界面如下，当然我这种手残党是画不出来，手动@陈冲老师画...
使用HTML5 Canvas与JavaScript绘制网页时钟
该文档详细阐述了如何使用JavaScript和HTML5的Canvas API来实现一个动态的网页时钟，包括绘制钟表盘面、指针以及模拟摆动的钟摆。这个时钟允许用户通过按钮调整大小和位置，提高了用户体验。 在JavaScript中，`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值