【canvas 动态时钟】

最新推荐文章于 2023-04-07 10:19:57 发布
最新推荐文章于 2023-04-07 10:19:57 发布
阅读量243 收藏 2
点赞数 2
文章标签： 动态时钟 canvas动画 canvas画布讲解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VickyTsai/article/details/90450946
版权
  • 画一个动态时钟,显示 当前时间
<!DOCTYPE html>
<html>
	<body>
	
		<canvas id="canvas" width="350" height="350" style="border:1px solid">
		Your browser does not support the canvas element.
		</canvas>
		
		<script type="text/javascript">
			  function clock(){
			  var now = new Date();//创建一个时间对象
			  var ctx = document.getElementById('canvas').getContext('2d');
			  ctx.save();//保存状态 栈1
			  ctx.clearRect(0,0,350,350); //清空画布
			  //ctx.scale(0.4,0.4);缩小整个图形,根据需要使用
			 
			  ctx.translate(180,180);//移动原点 到(180,180)
			  ctx.rotate(-Math.PI/2);//逆时针旋转90°
			  ctx.strokeStyle = "black";//绘线颜色,黑色
			  ctx.fillStyle = "white";//填充颜色白色
			  ctx.lineWidth = 5;//线宽 5
			  ctx.lineCap = "square";//线帽为正方形
			  ctx.save();//保存状态,栈2 原点为(180,180)
			
			  // 12个表示小时的线段 Hour marks
			  for (var i=0;i<12;i++){
			    ctx.beginPath();//新建路径
			    ctx.rotate(Math.PI/6);//顺时针旋转30°
			    ctx.moveTo(100,0);//起始点
			    ctx.lineTo(120,0);//终点
			    ctx.stroke();//绘线
			  }
			  
			  // (60-12)=48个 表示分针的线段 Minute marks
			  ctx.restore();//恢复状态,当前状态 = 状态2 = 原点=(180,180)
			  ctx.save();//保存状态2=栈2
			  ctx.lineWidth = 5;
			  
			  for (i=0;i<60;i++){
			    if (i%5!=0) {//当i对5的余数,不为0时,5的倍数,余数为0时,正好是12个时针的位置,不需要画了,不加这一句,效果也区别不大
			      ctx.beginPath();
			      ctx.moveTo(117,0);
			      ctx.lineTo(120,0);
			      ctx.stroke();
			    }
			    ctx.rotate(Math.PI/30);
			  }
			  ctx.restore();//恢复状态
			 
			  var sec = now.getSeconds();//获得当前时间的秒
			  var min = now.getMinutes();//获得当前时间的分
			  var hr  = now.getHours();//获得当前时间的小时
			  hr = hr>=12 ? hr-12 : hr;//三目运算符,hr >=12 ？是否成立 成立执行后面的 hr-12 不成立 执行:后面的hr 再把值赋给 hr；运算符的优先级  先执行三目 在赋值给hr
			
			  ctx.fillStyle = "black";
			
			  // 时针转动 write Hours
			  ctx.save();
			  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
			  ctx.lineWidth = 14;
			  ctx.beginPath();
			  ctx.moveTo(-20,0);
			  ctx.lineTo(80,0);
			  ctx.stroke();
			  ctx.restore();
			
			  // 分针转动 write Minutes
			  ctx.save();
			  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
			  ctx.lineWidth = 10;
			  ctx.beginPath();
			  ctx.moveTo(-28,0);
			  ctx.lineTo(112,0);
			  ctx.stroke();
			  ctx.restore();
			 
			  // 秒针转动Write seconds
			  ctx.save();
			  ctx.rotate(sec * Math.PI/30);
			  ctx.strokeStyle = "#D40000";
			  ctx.fillStyle = "#D40000";
			  ctx.lineWidth = 6;
			  
			  ctx.beginPath();
			  ctx.moveTo(-30,0);
			  ctx.lineTo(83,0);
			  ctx.stroke();
			  
			  ctx.beginPath();
			  ctx.arc(0,0,10,0,Math.PI*2,true);
			  ctx.fill();
			  
			  ctx.beginPath();
			  ctx.arc(95,0,10,0,Math.PI*2,true);
			  ctx.stroke();
			  
			  ctx.fillStyle = "rgba(0,0,0,0)";
			  ctx.arc(0,0,3,0,Math.PI*2,true);
			  ctx.fill();
			  ctx.restore();
			
			  ctx.beginPath();
			  ctx.lineWidth = 14;
			  ctx.strokeStyle = '#325FA2';
			  ctx.arc(0,0,142,0,Math.PI*2,true);
			  ctx.stroke();
			
			  ctx.restore();
			
			  window.requestAnimationFrame(clock);
			}
			
			window.requestAnimationFrame(clock);
		</script>
	
	</body>
</html>

在这里插入图片描述

Hey_Coder
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas实现动态时钟
joyouscola的博客
04-01 406
HTML5之前，为了达到页面绚丽多彩的效果，我们很多情况下都是借助“图片”来实现。不过使用图片这种方式，都是以“ ”低性能为代价的。由于图片体积大、下载速度慢等原因，因此为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。 Canvas又称为“画布”，是HTML5的核心技术之一。我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。 Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢
Canvas动态时钟
javscp_q的博客
08-16 120
基于Canvas制作的动态时钟demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态时钟</title> <script type="text/javascript" src="js/lattice.js"></...
Canvas绘制动态时钟
Studious_S的博客
05-05 434
Canvas绘制时钟 话不多说，直接上代码. //HTML页面部分 <!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-s
用canvas来实现动态时钟
一个假胖子
10-24 334
之前用简单的css与js来实现动态的时钟，发现直接用canvas也可以画时钟，只不过时钟圈和指针应该要放在不同的画布canvas中比较好，因为指针所在的画布是要一直旋转的，详细代码如下（如有问题，望大家指出，一起进步哈！） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt...
微信小程序canvas动态时钟
01-18
本文实例为大家分享了微信小程序canvas动态时钟的具体代码，供大家参考，具体内容如下 canvas时钟效果图： 代码： wxml: <canvas canvas-id='clock' xss=removed></canvas> js: Page({ da
JavaScript Canvas绘制时钟
最新发布
02-22
这个JavaScript Canvas时钟实例展示了如何利用Canvas API进行动态图形绘制。你可以根据需要调整颜色、大小或添加更多细节，如数字刻度或时钟背景，以实现自定义的时钟效果。通过深入理解Canvas的绘图方法，你可以...
javascript canvas封装动态时钟
10-14
为了使时钟动态显示时间，你需要添加一个定时器，比如`setInterval`，每隔一段时间（例如1秒）更新时钟的指针。这通常涉及到计算当前小时、分钟和秒的角度，并用`rotate`方法旋转画布，然后绘制指针。对于时针，由于...
canvas时钟效果
08-31
总结来说，这个canvas时钟效果是通过JavaScript和HTML5的Canvas API实现的，它结合了时间更新、数字绘制、动画原理以及可能的用户交互，展示了Canvas在动态网页设计中的强大能力。为了完全实现这个时钟，你需要补充...
JS+Canvas绘制动态时钟效果
10-19
为了让时钟动态显示，我们需要在`draw`函数内部添加一个定时器，每隔一定时间（例如1秒）调用一次`draw`，这样时钟就会实时更新。 ```javascript setInterval(draw, 1000); ``` 至此，我们就完成了使用JavaScript...
显示时间-canvas
09-12
使用html5新技术-canvas以及javascript语言，正确的显示时间，并根据时分秒的十位或者个位的变化，产生彩色的小球
炫酷动态时钟——canvas
weixin_48833991的博客
06-24 899
今天分享一下用canvas做的动态时钟，原理和代码都很简单，不过还是可以做出很炫酷的效果，想学习canvas的小伙伴可以看一下。 效果图 HTML5的canvas的知识点 看源代码前先看一下canvas的基本知识点： 首先，找到 canvas 元素: var c=document.getElementById(“myCanvas”); 然后，创建 context 对象： var ctx=c.getContext(“2d”); getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路
canvas画布制作动态时钟
qq_21948601的博客
04-07 627
canvas制作动态
HTML5-Canvas动态时钟
本该如此
04-07 348
Canvas实现简单的动态时钟效果，简单易懂
canvas动态时钟(老师写的)
jasonjkj的博客
09-21 392
html> head> title>动态时间.htmltitle> meta charset="UTF-8"> meta name="keywords" content="keyword1,keyword2,keyword3"> meta name="description" content="this is my page"> meta name="con
用canvas实现钟表展示当前时间
m0_73591473的博客
11-14 181
【代码】用canvas实现钟表展示当前时间。
canvas 时间显示效果
hadoop_在路上
01-28 363
var WINDOW_WIDTH=1024; var WINDOW_HEIGHT=768; var RADIUS =8; var MARGIN_TOP=60; var MARGIN_LEFT=30; var curShowTime; var balls =[]; const color
canvas画布画时钟(事件跟当前时间一样)
qq_44899153的博客
06-27 592
说明:代码里面的注释打开之后可以画出钟表的1-12时刻(在有背景图片是不需要打开) 效果图 1.关掉注释,有背景图 2.打开注释,无背景图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
html5之canvas实现模拟简易时钟
normol的博客
10-26 2418
个人理解： moveTo 类似于提笔去另一个新地方 translate类似于把整张画布移位 如果画一条新路径不使用beginPath(),择stroke()会把之前画过的（即已经执行的stroke()重新再画一遍，相当于描粗了） 画背景的函数中不能使用stroke()，因为画时分秒是基于开始已经translate（）的画布上的 但画时分秒的函数中需要开始和结尾分别save
实现HTML5 Canvas绘制时钟
06-01
<title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></canvas> function drawClock() { // 获取Canvas元素 var canvas = document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值