html5canvas绘制时钟

最新推荐文章于 2022-11-21 19:02:08 发布
最新推荐文章于 2022-11-21 19:02:08 发布
阅读量1.2k 收藏 3
点赞数
文章标签： html5 绘制时钟 canvas 
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<script type="text/jscript">
var slen=70;
var mlen=65;
var hlen=45;
var ls=0;
var lm=0;
var lh=0;
function draw()				//时钟轮廓
{
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	cxt.beginPath();
	cxt.arc(200,150,5,0,2*Math.PI,true);
	cxt.fill();
	cxt.closePath();
	cxt.beginPath();			
	cxt.arc(200,150,100,0,2*Math.PI,true);
	cxt.stroke();
	cxt.closePath();
	cxt.beginPath();
	cxt.translate(200,150);
	cxt.rotate(-Math.PI/2);
	cxt.save();
	for(var i=0;i<60;i++)
	{
		if(i%5==0)
		{
			cxt.fillRect(80,0,20,5);
			}
		else
		{
			cxt.fillRect(90,0,10,2);
			}
		cxt.rotate(Math.PI/30);
		}
	cxt.closePath();
	setInterval("Refresh()",1000);
	}
function Refresh()
{
	var c=document.getElementById("myCanvas");	
	var cxt=c.getContext("2d");

	cxt.restore();
	cxt.save();
	cxt.rotate(ls*Math.PI/30);
	cxt.clearRect(5,-1,slen+1,4);			//清除时钟针
	
	cxt.restore();
	cxt.save();
	cxt.rotate(lm*Math.PI/30);
	cxt.clearRect(5,-1,mlen+1,5);

	cxt.restore();
	cxt.save();
	cxt.rotate(lh*Math.PI/6);
	cxt.clearRect(5,-3,hlen+1,6);			


	var time=new Date();
		var s=ls=time.getSeconds();
		var m=lm=time.getMinutes();
		var h=lh=time.getHours();

		cxt.restore();				//重画时钟针
		cxt.save();
		cxt.rotate(s * Math.PI/30);
		cxt.fillRect(5,0,slen,2);

		cxt.restore();
		cxt.save();
		cxt.rotate(m * Math.PI/30);
		cxt.fillRect(5,0,mlen,3);

		cxt.restore();
		cxt.save();
		cxt.rotate(h * Math.PI/6);
		cxt.fillRect(5,-2,hlen,4);		
	}
</script>
</head>
<body>
<fieldset>
<legend>绘制时钟</legend>
<canvas id="myCanvas" width="400" height="300"></canvas>
<br>
<button onClick="draw()">绘图</button>
</fieldset>
</body>
</html>

云卷云舒i
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 Canvas绘制时钟
06-01
NULL 博文链接：https://wenhai.iteye.com/blog/2158714
用canvas绘制时钟
ancha7106的博客
07-21 201
用canvas做时钟其实很简单，下面是我做出的效果： 是不是还挺漂亮的？ 下面上代码： html <div class="whole"> <canvas id="canvas" width="450" height="450"></canvas> <canvas id="canvas1" width="3...
Html5 canvas 钟表
weixin_33965305的博客
11-02 113
原文:Html5 canvas 钟表看到有不少人用canvas写钟表，今天也来加入他们，自己实现个。   效果图：   实现代码如下： &lt;html&gt; &lt;head&gt; &lt;title&gt;Html5 canvas 钟表&lt;/title&gt; &lt;style type="text/css"&gt; canv...
HTML5 Canvas 动画时钟
04-08
NULL 博文链接：https://mooring.iteye.com/blog/1594032
HTML5 canvas时钟钟表！
Xweihaifeng@outlook.com的博客
06-25 488
canvas时钟 * { margin: 0; padding: 0; } html,body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #clock { position: absolute; background: #333; border-radius: 50%; transform: transla
javascript+HTML5 canvas绘制时钟功能示例
10-17
### JavaScript + HTML5 canvas 绘制时钟功能知识点解析 #### HTML5 canvas 基础知识 HTML5 canvas 元素提供了一种通过JavaScript和它的Canvas绘图API来绘制图形的方式。一个 canvas 是一个矩形区域，可以通过脚本...
JavaScript html5 canvas绘制时钟效果(二)
10-22
HTML5的canvas除了可以用于绘制时钟效果，还可以用于制作各种各样的图形和动画，比如制作图表、动画小游戏等。这种技术已经成为前端开发中不可或缺的一部分，熟练掌握它能够帮助开发者制作出更加丰富和动态的网页...
JavaScript html5 canvas绘制时钟效果
10-22
4. 在draw()函数中，首先清除画布上的旧内容，然后绘制时钟的外壳（一个圆），以及12个时标。 5. 获取当前时间，通过Date对象的getHours()、getMinutes()和getSeconds()方法分别得到小时、分钟和秒数，并计算出时针...
在html中用canvas制作时钟,html5 canvas 画时钟
weixin_35953844的博客
06-18 172
HTML>//getthecanvasvarmyCanvas=document.getElementById("myCanvas");varctx=myCanvas.getContext("2d");functionshowClock(){ctx.save();ctx.save();ctx.save();ctx.save();ctx.save();ctx.save();c...
JavaScript-Html-绘制时钟
http://lioil.win
05-20 1941
使用Html控件canvas，利用JavaScript绘制时钟效果图如下： <!DOCTYPE html> <html> <body> <canvas id="canvas" width="500" height="500" style="border:4px solid #00f;"/> <script> var canvas = d
HTML5：canvas制作时钟
02-22
每周定期有公开直播课，有业内大咖为你授业解惑，真实项目案例分享，从零到大神的成功之路，从你相信我开始!!!
html5 canvas 绘制钟表
事与愿违
05-23 1608
终于没有兼容bug了 。。。   * { margin: 0; padding: 0; } canvas { box-shadow: 0 0 10px 10px #CCCCCC; display: block; margin: 50px auto 0; } window.onload = function() { new c
html5 canvas时钟
andywang821017的博客
09-19 111
基础知识点： canvas标签只是图形容器，您必须使用脚本来绘制图形。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。 fillRect(l,t...
html：canvas画布绘图简单入门-绘制时钟-3
彭世瑜的博客
01-01 1485
示例10：绘制时钟 <canvas id="canvas" width="600" height="600"></canvas> <script> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width
使用Canvas HTML5画出时钟
m0_65627447的博客
11-21 1024
HTML5 Canvas画时钟
用html制作一个时钟的说明,用HTML5绘制一个时钟
weixin_34409895的博客
06-16 221
JS代码var canvas;function clock(){//canvas = document.createElement('canvas');canvas = document.getElementById("diagonal");canvas.width=400;canvas.height=400;var ctx = canvas.getContext('2d');if(ctx){va...
html5中使用canvas画时钟
wu_niang的博客
02-18 557
首次使用canvas+js画时钟主要用到知识点： arc(x1,y1,radius,startAngle,endAngle,counterclorkwise):以（x,y）为圆心绘制一条弧线，弧线半 径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示 stratAngle和endAngle是否按逆时针方向计算，值为false表示按顺时针
Canvas绘制一个时钟
秃头小桂子
05-11 2256
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
实现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、付费专栏及课程。

余额充值