canvas绘制一个会转动的表盘

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量298 收藏
点赞数 1
分类专栏： 前端实现动画分类 文章标签： canvas js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxy0114/article/details/109314771
版权

好长时间没有写过canvas了，该篇文章是我借助于两位博友的代码来实现的一篇文章，当笔记供自己日后学习更方便，也希望能帮助有需要的朋友！效果图展示效果图

<style type="text/css">
	#myCanvas,#myCanvas2{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	#myCanvas{
		z-index: 2;
	}
</style>

<body>
	<canvas id="myCanvas" width="500" height="500"></canvas>
		<!-- 表盘背景图画布：canvas插入画像
			[canvas插入图像不显示问题，详情参考地址：](https://www.cnblogs.com/padding1015/p/9717845.html)
		 -->
	<canvas id="myCanvas2" width="500" height="500"></canvas>
</body>

<script type="text/javascript">
	var myCanvas=document.getElementById("myCanvas");
	var cxt=myCanvas.getContext('2d');
	//表盘背景图
	var myCanvas2=document.getElementById("myCanvas2");
	var cxt2=myCanvas2.getContext('2d');
	var bgImg=new Image();
	bgImg.src="img/eg_flower.png";
	bgImg.onload = function(){
	    // console.log('图片加载成功');
	    // console.log(this);
	    cxt2.drawImage(bgImg,165,200,200,150);
	};
	function drawClock(){
	    //获取时间
	    var now = new Date();   //定义时间
	    var sec = now.getSeconds();  //获取秒
	    var minute = now.getMinutes();  //获取分钟
	    var hour = now.getHours();   //获取小时
	    //小时必须获取浮点类型，产生偏移（小时+分钟比）
	    hour = hour + minute/60;
	    //将24小时转换为12小时
	    hour=hour>12?hour-12:hour;
		//清除画布
		cxt.clearRect(0,0,500,500);
	    //表盘
	    cxt.beginPath();  //画笔开始
	    cxt.lineWidth = 2;  //设置画笔的线宽
	    cxt.strokeStyle="#999";  //设置画笔的颜色
		// 表盘外圆
	    cxt.arc(250,250,200,0,360,false);  //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
		// cxt.moveTo(194,100);
		//表盘内圆
		cxt.moveTo(440,250);
	    cxt.arc(250,250,190,0,360,false);  //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
	    cxt.stroke();   //填充绘图
	    cxt.closePath();  //结束画布
	    //刻度
	        //时针刻度
	        for(var i=0; i<12; i++){
				cxt.save();
				//设置时针的样式  宽度  颜色
				cxt.lineWidth=3;
				cxt.strokeStyle="#000";
				//设置异次元空间圆心
				cxt.translate(250,250);
				//设置旋转角度
				cxt.rotate(i*30*Math.PI/180);
				cxt.beginPath();
				cxt.moveTo(0,-175); //画线， 从圆心0，-175开始
				cxt.lineTo(0,-190); //到圆心0，-190结束
				cxt.stroke();
				cxt.closePath();
				cxt.restore();
	        }
	        //分针刻度
	        for(var i=0; i<60;i++){
				cxt.save();
				cxt.lineWidth=1;
				cxt.strokeStyle="#000";
				cxt.translate(250,250);
				cxt.rotate(i*6*Math.PI/180);
				cxt.beginPath();
				cxt.moveTo(0,-180);
				cxt.lineTo(0,-190);
				cxt.stroke();
				cxt.closePath();
				cxt.restore();    
	        }
	                
	    //时针
	    cxt.save();
	    //时针样式
	    cxt.lineWidth = 5;
	    cxt.strokeStyle="#000";
	    cxt.translate(250,250);
	    cxt.rotate(hour*30*Math.PI/180);
	    cxt.beginPath();
	    cxt.moveTo(0,-140);
	    cxt.lineTo(0,10);
	    cxt.stroke();
	    cxt.closePath();
	    cxt.restore();
	            
	    //分针
	    cxt.save();
	    //分针样式
	    cxt.lineWidth = 2;
	    cxt.strokeStyle="#000";
	    cxt.translate(250,250);
	    cxt.rotate(minute*6*Math.PI/180);
	    cxt.beginPath();
	    cxt.moveTo(0,-160);
	    cxt.lineTo(0,15);
	    cxt.stroke();
	    cxt.closePath();
	    cxt.restore();
	            
	    //秒针
	    cxt.save();
	    cxt.lineWidth = 3;
	    cxt.strokeStyle="#f00";
	    cxt.translate(250,250);
	    cxt.rotate(sec*60*Math.PI/1800);
	    cxt.beginPath();
	    cxt.moveTo(0,-185);
	    cxt.lineTo(0,20);
	    cxt.stroke();
	    cxt.closePath();
	            
	    //画出时针，分针，秒针交叉点
	    cxt.beginPath();
	    cxt.strokeStyle="#f00";
	    cxt.arc(0,0,5,0,360,false);
	    cxt.fillStyle="#fff";   //填充的颜色
	    cxt.fill();   //填充
	    cxt.stroke();
	    cxt.closePath();
	            
	    //秒针装饰
	    cxt.beginPath();
	    cxt.strokeStyle="#f00";
	    cxt.arc(0,-160,5,0,360,false);
	    cxt.fill();
	    cxt.stroke();
	    cxt.closePath();
	    cxt.restore();
	    function hous(x,y,r,h,cxt){
			//三次立方根
		    var gen3=Math.sqrt(3);
			//半径
		    var rs=0.5*r;
		    switch(h) {
				case 1:
					cxt.fillText("1",x+rs,y-rs*gen3);
					break;
				case 2:
					cxt.fillText("2",x+gen3*rs,y-rs);
					break;
				case 3:
					cxt.fillText("3",x+2*rs,y);
					break;
				case 4:
					cxt.fillText("4",x+gen3*rs,y+rs);
					break;
				case 5:
					cxt.fillText("5",x+rs,y+gen3*rs);
					break;
				case 6:
					cxt.fillText("6",x,y+2*rs);
					break;
				case 7:
					cxt.fillText("7",x-rs,y+gen3*rs);
					break;
				case 8:
					cxt.fillText("8",x-gen3*rs,y+rs);
					break;
				case 9:
					cxt.fillText("9",x-2*rs,y);
					break;
				case 10:
					cxt.fillText("10",x-gen3*rs,y-rs);
					break;
				case 11:
					cxt.fillText("11",x-rs,y-gen3*rs);
					break;
				case 12:
					cxt.fillText("12",x,y-2*rs);
					break;
				default:
				alert("超出时间刻度1~12的范围啦！");
			}
		}
		// 添加表盘上的数字
		cxt.font="bold 14px Arial";
		cxt.textAlign="center";
		cxt.textBaseline="midden";
		for(var i=1;i<13;i++){
			hous(252,254,160,i,cxt);
	    }
	}
   //使用setinterval()计时器让时钟动起来
   setInterval(drawClock,1000);
</script>

然后说一下清除画布，不清除画布的话，就会发生该图现象：
在这里插入图片描述
所以当时钟转动起来的时候，需要清除一下画布，不然就会像上图展示的那样，会留下时分秒三针的轨迹，遍布表盘。

wxy0114
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Canvas绘制仪表盘
weixin_46021847的博客
09-02 941
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制仪表盘</title> <style> body { background: #2c3e50; } #myCanvas { border: 1px .
LV2之-----canvas 画布实现 自转时钟& 大转盘
跛鳖千里，丘山崇成
05-21 372
canvas 画布运用实例：1.系统时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
Canvas的初识——模拟表盘数字绘制
事情往往烟消云散
08-29 3043
看了题目，大家都该知道，我今天想说些什么了，是的，我今天想说说Canvas这个android中的让人摸不着头脑的元素，对于Canvas很多人都知道他就是用来画东西的，其他的也没啥用，是啊，说的没错，它就是用来画东西的，可能刚接触android的童鞋们不了解，但是有一定时间开发经验的小伙伴们都知道，Canvas是走进android高级开发道路上必不可少的，那么它究竟有什么地方让我们这么捉摸不透呢？下面
【HTML5】——canvas画转盘方法总结
茨时代べ 的博客
10-24 514
rotate方法 将矩形旋转 20 度： var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.rotate(20*Math.PI/180); ctx.fillRect(50,20,100,50);
canvas 绘制钟表
kklkjfdiiu的博客
03-30 158
时钟示例
Canvas下画仪表盘，结合设计好的表盘背景
记录下日常遇到的问题或者一些思考，不喜勿喷
06-30 874
canvas 仪表盘
利用canvas绘制表盘
admin_djp的博客
12-15 914
canvas canvas简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 准备工作 在我们开始画时钟之前，我们需要页面上画一个canvas用来绘制时钟，而且 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。 其中width和height是画布的宽和高，并给它取个id后面方便找到她。 canvas.getCont
C#绘制表盘，源码分享
09-20
在这个项目中，你可能会找到一个名为`Dashboard.cs`的类，该类可能负责绘制和管理表盘的逻辑。类的实例化可能需要传入一些参数，如表盘半径、刻度数量、指针长度等。代码中可能包含绘制函数，如`DrawClock()`，它...
H5 Canvas百分比仪表盘特效
07-24
HTML5 Canvas是一个强大的Web绘图工具，允许开发者在网页上直接用JavaScript进行图形绘制，创造出丰富的动态视觉效果。在这个“H5 Canvas百分比仪表盘特效”项目中，我们将深入探讨如何利用Canvas API来构建一个美观...
Canvas仪表盘动画特效特效代码
03-20
在这个"Canvas仪表盘动画特效特效代码"中，我们主要探讨如何利用Canvas API创建一个圆形数值仪表盘，并实现动态的UI动画效果。 首先，我们需要理解Canvas的基本结构。在HTML中，我们创建一个`<canvas>`元素，然后...
汽车仪表盘canvas动画.zip
12-02
HTML5的Canvas元素是网页开发中的一个强大工具，它允许开发者在网页上绘制图形，创建动态视觉效果。在这个“汽车仪表盘canvas动画.zip”压缩包中，包含了一个使用纯JavaScript编写的汽车仪表盘插件，没有依赖jQuery...
canvas绘制仪表盘
11-24
用原生canvas绘制仪表盘，代码简单，参数可传递。本代码既可以用于学习canvas，也可以用于项目中。
canvas仪表盘
12-21
在IT行业中，Canvas是HTML5的一个重要特性，用于在网页上进行动态图形绘制。"canvas仪表盘"是指利用Canvas API创建的一种数据可视化工具，通常用于展示各种统计数据，如模仿淘宝信用评级仪表盘，这种设计可以帮助...
利用canvas绘制一个简单时钟
奋斗在路上
11-18 3796
首先在主页面中构建基本框架，其实只有一个时钟也没有什么框架啦 canvas clock div{ text-align: center; margin-top: 250px; } #clock{ border: 1px solid #ccc; } ---------------------------------------
canvas绘制时钟刻度表
libinbin147256369的博客
05-05 2995
canvas绘制时钟刻度表1.首先看一下效果图2.基本知识点canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线canvas.drawLine:绘制线段，指定起始位置就好canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态canvas.restore:恢复到保存时候的canvas状态，这么...
C++中使用clock()函数测试程序时间
热门推荐
对酒当歌
11-09 1万+
c++的头文件ctime/time.h中的库函数clock()提供了测试函数运行时间的方法： 1、clock()返回类型为clock_t类型 2、clock_t实际为long 类型，   typedef long clock_t 3、clock() 函数，返回从  开启这个程序进程 到 程序中调用clock（）函数 时之间的CPU时钟计时单元（clock tick）数（挂钟时间）
linux--clock() 函数介绍
天道酬勤
04-12 1万+
一、使用遇到的问题 1、测试同一程序在不同平台上运行的时间，使用c/c++中的计时函数clock()，使用时测试的时间，pc的windows下是143s，imx6的linux下是81791s （1）调用clock()函数的代码 （2）pc的windows下是143s （3）imx6的linux下是81791s   二、问题分析 1、对clock()函数理解不对；   ...
20111203 坑爹的clock_t与time_t的区别
LBO4031的专栏
11-24 3935
20111203 坑爹的clock_t与time_t的区别 http://www.cnblogs.com/chenyadong/archive/2011/12/03/2274783.html 一、当日工作（或学习）内容及进展情况（以条目式陈述，必要时配图说明） 依旧先看个例子 再看结果 解释：clock()返回从“开启这个程序进程”到“程序中调用clock()函数”时
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 2823
title>充电效果
canvas绘制一个户型图
07-12
这会创建一个宽度为800像素、高度为600像素的Canvas。 2. 在JavaScript中获取Canvas元素的引用： ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 3. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值