canvas实现动态时钟

最新推荐文章于 2023-12-17 19:43:31 发布
最新推荐文章于 2023-12-17 19:43:31 发布
阅读量402 收藏 1
点赞数
分类专栏： canvas 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joyouscola/article/details/115384823
版权

HTML5之前，为了达到页面绚丽多彩的效果，我们很多情况下都是借助“图片”来实现。不过使用图片这种方式，都是以“ ”低性能为代价的。由于图片体积大、下载速度慢等原因，因此为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。
Canvas又称为“画布”，是HTML5的核心技术之一。我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。
Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢量”的，不适于像素处理和静态描述，图形放大不会影响智力。也就是说，使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图。

绘制动态时钟

首先是画布

<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");

</script>

绘制表盘

context.beginPath();
			context.lineWidth = 10;
			context.arc(300, 300, 200, 0, 2 * Math.PI, false);
			context.strokeStyle = "aquamarine";
			context.stroke();
			context.closePath();

绘制刻度


//刻度
			//时
			for(var i = 0; i < 12; i++) {
				//用到异次元画法
				context.save();
				context.beginPath();
				//重新设置0，0点
				context.translate(300, 300);
				//旋转角度
				context.rotate(i * 30 * Math.PI / 180);
				context.moveTo(0, -200);
				context.lineTo(0, -180);
				context.stroke();
				context.closePath();
				//异次元的东西  塞回来
				context.restore();
			}
			//分刻度
			for(var i = 0; i < 60; i++) {
				//用到异次元画法
				context.save();
				context.beginPath();
				//重新设置0，0点
				context.translate(300, 300);
				//旋转角度
				context.rotate(i * 6 * Math.PI / 180);
				context.moveTo(0, -200);
				context.lineTo(0, -185);
				context.lineWidth = 8;
				context.stroke();
				context.closePath();
				//异次元的东西  塞回来
				context.restore();
			}

			//时针
			context.beginPath();
			context.save();
			//重新设置0，0点
			context.translate(300, 300);
			//旋转角度
			context.rotate(hour * 30 * Math.PI / 180);
			context.moveTo(0, 0);
			context.lineTo(0, -100);
			context.lineWidth = 8;
			context.stroke();
			context.closePath();
			//异次元的东西  塞回来
			context.restore();

			//分针
			context.beginPath();
			context.save();
			//重新设置0，0点
			context.translate(300, 300);
			//旋转角度
			context.rotate(min * 6 * Math.PI / 180);
			context.moveTo(0, 10);
			context.lineTo(0, -130);
			context.lineWidth = 5;
			context.stroke();
			context.closePath();
			//异次元的东西  塞回来
			context.restore();

			//秒钟
			context.beginPath();
			context.save();
			//重新设置0，0点
			context.translate(300, 300);
			//旋转角度
			context.rotate(sec * 6 * Math.PI / 180);
			context.moveTo(0, 15);
			context.lineTo(0, -150);
			context.lineWidth = 3;
			context.stroke();
			context.closePath();
			//异次元的东西  塞回来
			context.restore();

绘制表心

			context.beginPath();
			context.lineWidth = 10;
			context.arc(300, 300, 10, 0, 2 * Math.PI, false);
			context.fillStyle = "white";
			context.fill();
			context.closePath();

对当前的时间进行获取

			context.clearRect(0,0,600,600);
			//在画所有的东西之前都要去取到当前的时间
			var now = new Date();
			var hour = now.getHours();
			var min  = now.getMinutes();
			var sec  = now.getSeconds();
			hour = hour+min/60
			if(hour >12){
				hour = hour -12;
			}

计时器的运用

var timer = setInterval(show,1000)

源码为

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#canvas {
				/*border: 1px solid red;*/
				display: block;
				margin: 0 auto;
			}
		</style>
	</head>

	<body bgcolor="black">
		
		<canvas id="canvas" width="600" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");

		var context = canvas.getContext("2d");

		function show() {
			context.clearRect(0,0,600,600);
			//在画所有的东西之前都要去取到当前的时间
			var now = new Date();
			var hour = now.getHours();
			var min  = now.getMinutes();
			var sec  = now.getSeconds();
			hour = hour+min/60
			if(hour >12){
				hour = hour -12;
			}
			
			//表盘
			context.beginPath();
			context.lineWidth = 10;
			context.arc(300, 300, 200, 0, 2 * Math.PI, false);
			context.strokeStyle = "aquamarine";
			context.stroke();
			context.closePath();

			//刻度
			//时
			for(var i = 0; i < 12; i++) {
				//用到异次元画法
				context.save();
				context.beginPath();
				//重新设置0，0点
				context.translate(300, 300);
				//旋转角度
				context.rotate(i * 30 * Math.PI / 180);
				context.moveTo(0, -200);
				context.lineTo(0, -180);
				context.stroke();
				context.closePath();
				//异次元的东西  塞回来
				context.restore();
			}
			//分刻度
			for(var i = 0; i < 60; i++) {
				//用到异次元画法
				context.save();
				context.beginPath();
				//重新设置0，0点
				context.translate(300, 300);
				//旋转角度
				context.rotate(i * 6 * Math.PI / 180);
				context.moveTo(0, -200);
				context.lineTo(0, -185);
				context.lineWidth = 8;
				context.stroke();
				context.closePath();
				//异次元的东西  塞回来
				context.restore();
			}

			//时针
			context.beginPath();
			context.save();
			//重新设置0，0点
			context.translate(300, 300);
			//旋转角度
			context.rotate(hour * 30 * Math.PI / 180);
			context.moveTo(0, 0);
			context.lineTo(0, -100);
			context.lineWidth = 8;
			context.stroke();
			context.closePath();
			//异次元的东西  塞回来
			context.restore();

			//分针
			context.beginPath();
			context.save();
			//重新设置0，0点
			context.translate(300, 300);
			//旋转角度
			context.rotate(min * 6 * Math.PI / 180);
			context.moveTo(0, 10);
			context.lineTo(0, -130);
			context.lineWidth = 5;
			context.stroke();
			context.closePath();
			//异次元的东西  塞回来
			context.restore();

			//秒钟
			context.beginPath();
			context.save();
			//重新设置0，0点
			context.translate(300, 300);
			//旋转角度
			context.rotate(sec * 6 * Math.PI / 180);
			context.moveTo(0, 15);
			context.lineTo(0, -150);
			context.lineWidth = 3;
			context.stroke();
			context.closePath();
			//异次元的东西  塞回来
			context.restore();

			//表心
			context.beginPath();
			context.lineWidth = 10;
			context.arc(300, 300, 10, 0, 2 * Math.PI, false);
			context.fillStyle = "white";
			context.fill();
			context.closePath();
		}
		var timer = setInterval(show,1000)
	</script>

</html>

如有不足，请多指导

joyouscola
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能
04-25
分享一个使用canvas写的时间轴插件 这是一个使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能 在我工作项目中用在了视频回放时间轴部分 项目开发刚好用到，找了很久终于合适
使用canvas编写时间轴插件
weixin_30733003的博客
03-02 1555
使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能，需要一个时间轴类似视频播放中进度条功能一样显示录像情况，并且可以点击、拖动、放大缩小展示时间轴，获取到时间轴的某个时间。原来的时间轴是使用了timeslider 这个插件，原插件中是使用原生的js 绘制dom节点来显示时间轴，后面使用起来发现每一次重绘就要操作上百个dom节点，性能很差，所以决定采用canvas来重写时间轴。 效果如...
canvas实现拖动页面时显示窗口视频
weixin_30781631的博客
01-08 98
简介 　　当前主流的视频网站目前有不少新鲜好玩的功能，最明显的莫过于小视频的显示--当视频不在当前视口范围 时，会在右下角用一个小窗口来显示当前的视频，而且可以拖拽。 　　今晚心血来潮，起了动手试试的念头。我的想法很简单，用canvas来获取视频每一帧的数据，并用动画函数 requestAnimationFrame函数（这里没有考虑兼容性）来显示每一帧的视频数据。另外，对canvas绑定拖...
SkeyeVSS综合安防监控录像回放控制之自定义可拖动时间轴组件
OpenSkeye的博客
04-30 6829
SkeyeVSS综合安防视频云服务通过接入SkeyeRMS录像服务器实现对系统里的摄像机等设备录像，通过自定义的时间轴组件对录像记录进行加载渲染,播放器回调时间与下面时间轴相互联动，集拖动、点击、缩放、无限加载等于一体的时间轴组件。 通过接口获取录像回放记录的列表，数据结构中包含每段录像的开始与结束时间，把每段记录绘制到时间轴上，左右拖动会自动触发日期的改变回调，再通过接口去获取对应日期的数据，方便我们整体查看，点击有录像的时间段区域或拖动指针（三角形）返回当前时间戳，再配合拉流进行播放，通过滚轮缩放最小精
vue+canvas 录像类的时间进度组件（白嫖党永不为奴！！！）
qq_45599738的博客
10-27 1903
vue+canvas 视频监控一类的时间进度条控件
【Canvas】绘制时间轴+动态当前时间线
芳草萋萋鹦鹉洲哦
07-25 1978
/一分钟的宽度，每十分钟一小格每六个小格一个大格。重要ctx赋值全局变量，以免传输中改变。//超过2030时间从2030开始显示。//计算出当前时间与830之间的差值。//绘制时间轴时间线。//绘制动态时间线。...
使用canvas实现监控视频播放时间轴，支持有视频区域显示，拖拽等
weixin_46543056的博客
11-30 3689
效果图 HTML部分 <template> <div v-if="tipShow" id="tooltip_div">{{ pointTime }}</div> <canvas id="is_have_video" :width="width" height="50"></canvas> <canvas id="time_line" :width="width" height="50"></canvas&g
【原创】时间轴组件 timeline-canvas
最新发布
jqrrgmvtk的专栏
12-17 3895
一个基于 vue 框架使用 canvas 绘制的时间轴组件，可用于视频、录像播放或实时数据展示等业务。
vue+canvas绘制时间轴组件
m0_57590419的博客
08-25 1880
视频时间线
vue canvas typescript 绘制时间标尺
weixin_46364251的博客
09-14 3192
项目中有个需求，将对象一天内对应的不同的状态在时间轴上显示出来。调研的方案有5种， 1、时间轴用div画，时间轴上遮罩的状态改变则改变时间轴div本身的颜色。 2、时间轴用div画，时间轴上的遮罩用div画，状态改变则改变遮罩div的颜色，时间轴div只做展示不做样式更改。 3、时间轴用静态的图片展示，时间轴上的遮罩用div画，状态改变则改变遮罩div的颜色。 4、时间轴用canvas画，时间轴上的遮罩用canvas画，每次状态改变重绘canvas的时间轴和遮罩层。 5、时间轴用canvas画，时间轴用另外
canvas实现粒子时钟效果
08-31
本文将使用canvas实现粒子时钟效果，具有一定的参考价值，下面跟着小编一起来看下吧
h5，canvas实现时钟.zip
03-20
html5，canvas实现旋转时钟效果，炫酷彩色（可以自己设置），颜色动态变化，可以自行设置,canvas实现
js Canvas实现圆形时钟教程
10-21
主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript canvas动画实现时钟效果
10-15
主要为大家详细介绍了JavaScript canvas动画实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
actionscript html5,Animate CC HTML5/Canvas使用actionscript控制嵌套的MovieClip时间轴
weixin_39864373的博客
06-18 266
我有一个问题，我似乎无法包住我的头。 在Animate CC Canvas IDE中，我使用多个框架创建了一个Movieclip，并且在每个框架上都是另一个嵌套的动画片段，并且还包含其他动画片段(全部使用实例名称，而mainMc通过addChild()添加到舞台上)。Animate CC HTML5/Canvas使用actionscript控制嵌套的MovieClip时间轴所以 “mainMc&g...
利用canvas封装录像时间轴拖动(uniapp),封装上传uniapp插件市场
linxd的博客
12-15 677
项目是一个空项目,其中包含了封装的插件,自己阅读,由于利用了canvas所以在使用中暂不支持.nvue,待优化;项目也是借鉴了github上的一个项目,地址找不到了,尴尬了.........
canvas画图，时间轴刻度标签
qq_38814363的博客
07-18 538
canvas画图，时间轴刻度标签
使用Canvas 绘制施工进度/影像 图，支持滚动、缩放、拖拽、定位、折叠、下载、过渡，支持快捷操作
rudy_zhou的博客
03-08 783
使用Canvas 绘制施工进度/影像 图，支持滚动、缩放、拖拽、定位、折叠、下载、过渡，支持快捷操作前言演示图DEMO 及介绍总结 前言 分享一个工作中使用canvas制作的一个施工进度/影响记录 图，代码较长，就不解释了，有兴趣的小伙伴可以查看演示效果，有问题可以下方留言 演示图 DEMO 及介绍 支持操作： 1.比例缩放：鼠标在画布内时支持 Ctrl + 滚轮 缩放，Ctrl + alt + 滚轮 快速缩放； 2.横向滚动：鼠标在画布内时支持 shift + 滚轮 横向滚动，shift + al
canvas图像绘制（图像放大、缩小、拖动和截图）
热门推荐
qq_39404437的博客
08-06 2万+
1、canvas略解林大大又来更新啦~这次主要做的是关于canvas图像绘制的部分，要实现的功能主要是绘制、对canvas的放大以及那我们先来大概了解下canvas：1、canvas略解宽高是必须加上的，当然你也可以选择动态宽高，可以设置宽高百分比喔，canvas用于在页面上绘制图像（可以是自己的图片，也可以绘制自定义矢量图形：矩形等），其实我们不用担心大量的重绘canvas，现在浏览器完全扛得住这压力，非常流畅丝滑。
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <head> <title>Canvas时钟</title> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="clock" width="200" height="200"></canvas> <script> function drawClock() { // 获取Canvas元素 var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); // 获取Canvas中心点坐标 var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 绘制表盘 ctx.beginPath(); ctx.arc(centerX, centerY, 80, 0, 2 * Math.PI); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制刻度 for (var i = 1; i <= 12; i++) { var angle = i * Math.PI / 6; var x = centerX + 60 * Math.sin(angle); var y = centerY - 60 * Math.cos(angle); ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // 绘制时针 var now = new Date(); var hour = now.getHours() % 12; var minute = now.getMinutes(); var second = now.getSeconds(); var hourAngle = (hour + minute / 60) * Math.PI / 6; var hourX = centerX + 40 * Math.sin(hourAngle); var hourY = centerY - 40 * Math.cos(hourAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(hourX, hourY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制分针 var minuteAngle = minute * Math.PI / 30; var minuteX = centerX + 60 * Math.sin(minuteAngle); var minuteY = centerY - 60 * Math.cos(minuteAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(minuteX, minuteY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制秒针 var secondAngle = second * Math.PI / 30; var secondX = centerX + 60 * Math.sin(secondAngle); var secondY = centerY - 60 * Math.cos(secondAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(secondX, secondY); ctx.strokeStyle = "red"; ctx.stroke(); } // 每秒钟更新时钟 setInterval(drawClock, 1000); </script> </body> </html> ``` 这段代码使用Canvas绘制了一个时钟，并且每秒钟更新一次。你可以将代码复制到一个HTML文件中运行，就可以看到时钟的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值