canvas时针

最新推荐文章于 2020-09-23 14:24:36 发布
最新推荐文章于 2020-09-23 14:24:36 发布
阅读量127 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38409767/article/details/100762670
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#my_canves {
				display: block;
				margin: auto;
			}
		</style>
	</head>

	<body>
		<canvas id="my_canves" style="border: solid green;" width="400" height="300"></canvas>
		<script>
			window.onload = function(){	
				var ca = document.getElementById("my_canves");
				var content = ca.getContext("2d");
				cloc()
			function cloc() {

//为防止在定时器第二次触发时，画布上的第一次的图影响第二次的图，孤儿清理画布

                 content.clearRect(0,0,200,200)

//绘制整个表盘

				content.strokeStyle = "#000000";
				content.beginPath();
				content.arc(100, 100, 100, 0, Math.PI * 2, true);
				content.closePath();
				content.stroke();
                //绘制中间的小实心圆
				content.fillStyle = "#000000";
				content.beginPath();
				content.arc(100, 100, 5, 0, Math.PI * 2, true);
				content.closePath();
				content.fill();

//绘制12个时间的刻度

				for(var i = 0; i < 12; i++) {
					content.beginPath();
					content.save();
					content.translate(100, 100);
					content.rotate(i * 30 * Math.PI / 180);
					content.moveTo(0, 80);
					content.lineTo(0, 100)
					content.stroke();
					content.restore();
					content.closePath();
				}
//				绘制分的时间刻度
				for(var j = 0; j < 60; j++) {
					content.beginPath();
					content.save();
					content.translate(100, 100);
					content.rotate(j * 6 * Math.PI / 180);
					content.moveTo(0, 100);
					content.lineTo(0, 90);
					content.stroke();
					content.restore();
					content.closePath()
				}

				//获取当前的时间：

				var nowTime = new Date();
				var hours = nowTime.getHours();
				var minutes = nowTime.getMinutes();
				var seconds = nowTime.getSeconds();
                //调整时间为12小时计时
				hours = hours > 12 ? hours - 12 : hours;
				//根据当前的分得时间，调整当前的时的时间
				hours = hours + minutes / 12;
			//时针：
				content.beginPath();
				content.lineWidth = 5;
				content.save();
				content.translate(100,100);
				content.rotate(hours*30*Math.PI/180);
				content.moveTo(0,10);
				content.lineTo(0,-60)
				content.stroke();
				content.restore();
				content.closePath();
			//分针：
				content.beginPath();
				content.lineWidth = 3;
				content.save();
				content.translate(100,100);
				content.rotate(minutes*6*Math.PI/180);
				content.moveTo(0,10);
				content.lineTo(0,-70)
				content.stroke();
				content.restore();
				content.closePath();
			//秒针：		
				content.beginPath();
				content.lineWidth = 1;
				content.save();
				content.translate(100,100);
				content.rotate(seconds*6*Math.PI/180);
				content.moveTo(0,10);
				content.lineTo(0,-80)
				content.stroke();
				content.restore();
				content.closePath();
			
			}
			
			setInterval(cloc,1000);
		}	
		</script>
	</body>

</html>
阮太太
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas案例笔记
07-03
canvas基础教程案例笔记 Canvas： 这是画布标签。 ctx： 画笔 在JS中通过元素.getContext("2d") 获取画笔 ... x 表示弧度制单位 从当前坐标系沿着旋转x弧度 如果x值为正 顺时针旋转 反之 逆时针旋转
canvas绘制时针
qq_31800209的博客
09-11 166
canvas绘制时针 <canvas id="canvas" width="800" height="800"></canvas> let canvas = document.getElementById('canvas'); let cxt = canvas.getContext('2d'); setInterval(()=>{ show(); },1000) function show(){ /
canvas实现时针动画案例
xue1163的博客
09-23 269
canvas 一、canvas的基本使用 <canvas id="tutorial" width="300" height="300"></canvas> <canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。 如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以
canvas绘制时针，适合初学者——李帅醒博客
李帅醒的博客
12-26 2592
篇文章主要介绍了使用canvas绘制超炫时钟的方法及代码，这里推荐给大家，步骤详细。 先上效果图 为了方便初学者学习，我特意在canvas画布上画好了小方格，方便计算坐标。 HTML页面代码： 您的浏览器不支持canvas画布，请及时更新！！！ CSS代码： *{ margin:0px; padding: 0px; }
canvas绘制当前时间时钟
sdh888hf的专栏
03-27 218
[code="html"] html5 clock var clockCanvas = document.getElementById("clock"); var c = clockCanvas.getContext("2d"); function clock(){ var date = new Date(...
时钟（canvas)
09-19
通过canvas的translate和rotate属性，来实现时钟的分针、时针和秒针的旋转移动
HTML5 canvas时钟效果.zip
05-23
用HTML5的Canvas制作的时钟显示效果，绘制了表盘，时针，分针，秒针以及数字时间的显示，对该文件有问题可以私聊
JavaScript canvas绘制圆弧与圆形
01-19
本文实例为大家分享了canvas绘制圆弧与...分别代表：圆心 x 值，圆心 y 值，半径，开始的弧度值，结束的弧度值，（是否逆时针）。 例如： window: onload = function(){ var canvas = document.getElementById(can
canvas写一个时钟
09-19
实现时钟的分针、时针和秒针的旋转移动
函数没有返回值调用
qq_38409767的博客
08-21 3373
var x = 1, y = z = 0; function add(n) { n = n+1; } y = add(x); function add(n) { n = n + 3; } z = add(x); console.log(x);//1 console.log(y);//undefind console.log(z);//undefined 原因：后面的a...
ES6中的keys（）方法详解
qq_38409767的博客
10-15 2494
<script type="text/javascript"> // 1.传入对象，返回的是属性名 var obj = { 'a': 123, "b": 456 }; console.log(Object.keys(obj)) //["a","b"] var obj1 = { 100: "a", 2: "b", 23: "c" }; console.log(Object.keys(o...
两级联动实现的三种方法
qq_38409767的博客
08-21 2266
方法一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){...
如何改变alert的默认样式
qq_38409767的博客
07-22 2187
js部分： window.onload=function(){ window.alert=alert; } function alert(e) { //向body里添加一个大的div用作新的弹框 $("body").append("<div id='msg'><div id='msg_top'></div>&lt...
实现二级菜单的伸缩功能的两种方法
qq_38409767的博客
08-21 1690
要求 1、点击一级菜单，如果当前二级菜单是打开状态则二级菜单收起，小图标变成+ 如果当前二级菜单是关闭状态则展开二级菜单，小图标变成- 并且收起其他的二级菜单 2、页面中的二级菜单最多只能有一个是展开状态 方法一： <html> <head> <title>1. 实现伸缩二级菜单</title> <meta charset="utf-8" ...
当拖拽元素时遇到的各种问题，以及解决方法
qq_38409767的博客
08-27 1563
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置整个页面的元素都能拖动</title> <style type="text/css"> #box1 { width: 100px; height: 100...
bind，apply，cell的区别以及用法
qq_38409767的博客
08-21 1386
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> // bind()方法会给予一个现有的函数，把这个函数复制，再...
输入一个日期，判断是星期几
qq_38409767的博客
07-25 1295
> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> > <title>Document</title> </head> <body> <button > onclick="weekDay()"&g...
逻辑运算题
qq_38409767的博客
07-21 1291
<head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //1.为抵抗洪水，展示连续作战89小时，编程计算共多少天零多少小时？ //var time=prompt("请输入时间",""); //var day=p...
canvas使用方式
最新发布
08-04
回答: 使用canvas需要在页面中增加canvas标签，并设置其宽度和高度。例如：<canvas id="canvas" width="300" height=... // 绘制时针 ctx.moveTo(100, 100); ctx.lineTo(35, 100); // 描画路径 ctx.stroke(); }[2]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值