canvas实现动态时钟

最新推荐文章于 2022-11-21 19:02:08 发布
最新推荐文章于 2022-11-21 19:02:08 发布
阅读量160 收藏
点赞数 1

如题：

<!DOCTYPE html>
<html>
 <head>
 </head>
 
 <body>
   <div style="border:1px solid red;width:500px;height:500px;margin:0 auto">
      <!--html5新标记： 简单理解为画布 -->
	  
     <canvas id="can" width="500" height="500" style="background:#ccc">
	  您的浏览器不支持html5，请更换！
	 </canvas>
   </div>
   <script>
     //1 找到画布
	 var clock = document.getElementById("can");
	 //2 获取画笔
	 var hb = clock.getContext("2d");
	 // 5 将绘制的代码封装为一个整体
	function getTime(){
	 //7 清除之前画布上的图片
	 hb.clearRect(0,0,500,500);
	 //3 绘制表
	 // 3.1 绘制表盘
	 hb.beginPath(); //开启路径
	 hb.strokeStyle="#DAA520"; //画笔的颜色
	 hb.lineWidth=10; //画笔的宽度
	 hb.arc(250,250,200,0,2*Math.PI,false); // 绘制一个圆（x，y，r，起始弧度，最终弧度，顺时针）
	 hb.stroke(); //执行
	 hb.closePath(); //关闭路径
	 
	 // 3.2 绘制时针
	for(var i = 0; i < 12; i++){
	 hb.save(); //开启异次元，可以重新设置中心点
	 hb.translate(250,250); //设置新零点
	 hb.rotate(i*30*Math.PI/180); //旋转弧度（）
	 hb.beginPath();
	 hb.strokeStyle="#DAA520"; //画笔颜色
	 hb.lineWidth=5; //画笔的宽度
	 hb.moveTo(0,-195);
	 hb.lineTo(0,-175);
	 hb.stroke(); //执行
	 // 添加数字
	 hb.fillStyle = '#000'; //文字颜色填充
	 hb.font = '20px 微软雅黑';
	 if(i==0){
	    hb.fillText(12+'',-6,-150);
	 }
	 else{
	    hb.fillText(i+'',-6,-150);
	 }
	 hb.closePath();
	 hb.restore(); //闭合异次元
	}
	// 3.3 绘制分刻度（60根，每次偏转6度。长度10，宽度5）
	for(var i = 0; i < 60; i++){
	hb.save(); 
	 hb.translate(250,250);
	 hb.rotate(i*30*Math.PI/180/5); 
	 hb.beginPath();
	 hb.strokeStyle="#DAA520"; 
	 hb.lineWidth=1; 
	 hb.moveTo(0,-195);
	 hb.lineTo(0,-185);
	 hb.stroke();
	 hb.closePath();
	 hb.restore();
	}
	// 4 获取当前时间，计算各指针旋转角度
	 var now = new Date();//当前时间
	 var hours = now.getHours();//获取小时数
	 var min = now.getMinutes();//获取分针数
	 var secs = now.getSeconds();//获取秒数
	 hours = hours + min/60;
	 
	// 3.4 绘制时针
	hb.save(); 
	 hb.translate(250,250);
	 hb.rotate(30*hours*Math.PI/180); 
	 hb.beginPath();
	 hb.strokeStyle="#000"; 
	 hb.lineWidth=7; 
	 hb.moveTo(0,10);
	 hb.lineTo(0,-80);
	 hb.stroke();
	 hb.closePath();
	 hb.restore();
	// 3.5 绘制分针
	 hb.save(); 
	 hb.translate(250,250);
	 hb.rotate(6*min*Math.PI/180); 
	 hb.beginPath();
	 hb.strokeStyle="#000"; 
	 hb.lineWidth=5; 
	 hb.moveTo(0,10);
	 hb.lineTo(0,-100);
	 hb.stroke();
	 hb.closePath();
	 hb.restore();
	 // 3.6 绘制秒针
	 hb.save(); 
	 hb.translate(250,250);
	 hb.rotate(secs*6*Math.PI/180); 
	 hb.beginPath();
	 hb.strokeStyle="#000"; 
	 hb.lineWidth=3; 
	 hb.moveTo(0,10);
	 hb.lineTo(0,-120);
	 hb.stroke();
	 hb.closePath();
	 // 画中心红圆
	 hb.beginPath();
	 hb.strokeStyle="#f00"; 
	 hb.lineWidth=2; 
	 hb.arc(0,0,4,0,2*Math.PI,false);
	 hb.stroke();
	 hb.closePath();
	 //填充
	 hb.fillStyle="#f00";
	 hb.fill();
	 
	 hb.restore();
	}
	// 6 定时执行封装的代码
	// 每个1000毫秒（1秒）执行一个getTime
	 setInterval(getTime,1000);

	// 8 消除刷新延迟
	 getTime();
   </script>
   
 </body>
 
</html>

 

CD_knight
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 canvas实现钟表
a821253811的博客
09-21 1132
上次说到了canvas的画布如何画矩形、圆形和自由画图实现你画我猜的效果，这次就来说一下如何实现我们生活中最经常看到的时钟吧。 还是和之前一样的操作，写好画布的大小，因为有些浏览器不支持，所以写上不支持，在遇到不支持的浏览器时就会出现不支持三个字 &lt;canvas id="canvas" width="400" height="400"&gt; 不支持 &lt;/canvas&...
canvas实现时钟
m0_56274171的博客
07-07 711
canvas实现时钟
用Canvas实现时钟的效果
qq_25972233的博客
01-01 197
用canvas画布实现时钟效果 相信很多学习前端的新人,学完html结构和css样式以后,都会开始学习JavaScript,在学一段JavaScript以后会接触到canvas画布部分,相信很多同学学习完以后没有很好的项目给自己能够练习,所有我在这里把代码和项目送给有需要的同学！！ 前言 各位五湖四海的同学既然选择了前端开发这个行业,就努力的学下去吧,在这个行业技术不断的提高,才有可能获得你想要的报酬,废话就不多说啦,下面请用心的去理解 一、Canvas HTML的结构部分 <!DOCTYPE h
canvas实现粒子时钟效果
08-31
在本文中，我们将探讨如何使用HTML5的Canvas API来实现一个独特的粒子时钟效果。Canvas是一个强大的绘图工具，允许开发者在网页上进行动态图形绘制。在这个实例中，我们将利用Canvas来创建点阵数字，然后将这些数字...
h5，canvas实现时钟.zip
03-20
在这个“h5，canvas实现时钟”的项目中，我们主要关注如何利用Canvas API来创建一个实时更新的旋转时钟。这个时钟不仅具有炫酷的彩色外观，颜色还能动态变化，为用户提供高度自定义的可能性。 首先，我们需要理解...
javascript canvas封装动态时钟
10-14
为了使时钟动态显示时间，你需要添加一个定时器，比如`setInterval`，每隔一段时间（例如1秒）更新时钟的指针。这通常涉及到计算当前小时、分钟和秒的角度，并用`rotate`方法旋转画布，然后绘制指针。对于时针，由于...
javascript canvas实现简易时钟例子
10-14
综上所述，这个JavaScript Canvas实现的简易时钟例子，通过Canvas API的基本绘图功能，结合JavaScript的时间处理，成功地创建了一个实时更新的钟表。它展示了Canvas在动态图形和交互式界面设计中的强大潜力。对于想...
js Canvas实现圆形时钟教程
10-21
主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas绘图实现实时时钟效果
01-26
插件描述：canvas绘图实现时钟效果.
带你使用canvas实现时钟
qq_45768871的博客
04-22 835
带你使用canvas实现时钟 实现表盘 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin...
Canvas 画时钟
destiny'Note
11-30 5872
前言不管学习什么，不动手去做，永远不能熟练掌握。学习了 canvas API，会觉得只要按照直线、圆等画法去画，canvas 太简单了。可是，当你真正去画的时候，会遇到许多的问题。下面介绍的是 canvas 时钟，主要是与大家分享我的学习过程。 不懂 canvas 的同学，请先学习：Canvas 画布 一、相关几何知识钟面是一个圆，主要包含每个小时数字、以及刻度，它们的位置坐标应该如何计
canvas动画 实现时钟效果(详细注释)
小柒的前端之旅
04-17 564
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
使用Canvas HTML5画出时钟
m0_65627447的博客
11-21 1015
HTML5 Canvas画时钟
用h5中canvas实现钟表
weixin_43571052的博客
05-21 351
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
canvas实现时钟案例
weixin_45389051的博客
03-06 302
一.html <canvas id="clock" width="500" height="500" >你的浏览器不支持canvas</canvas> 二.css canvas{ background: #000; } 三.js <script> /* 难点1:怎样把时刻线绘制出来 难点2： 时间指针的旋转角度 秒：360/6...
js+Canvas实现时钟图，简单易懂
gisercug的博客
07-07 1391
本文主要参考canvas入门网址，加上自己理解将钟表图用原生js写出来，有两个难点 1.整个时钟的实现的难点和重点是save（）和restore（）的进栈 出栈，后进先出，理解的有点难，参考上面的网址很好理解，最后需要让第一个进栈的出栈 2， requestAnimFrame()这个函数，功能强大，类似于定时器，但其兼容性不好，之前没了解好，直接拿来用，结果导致了错误，具体优点可以参考这篇文章更...
基于canvas的原生JS时钟效果
findhappy117的博客
02-25 372
运用html5新增画布canvas技术，绘制时钟效果，无需引用任何插件，纯js。
实现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、付费专栏及课程。

余额充值