HTML5 canvas 实现小时钟

最新推荐文章于 2019-05-16 14:46:10 发布

墨影司

最新推荐文章于 2019-05-16 14:46:10 发布

阅读量933

点赞数

分类专栏： web前端文章标签： HTML5 canvas javascript

本文链接：https://blog.csdn.net/u012879038/article/details/21294487

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

正在看HTML5的相关内容，这个是关于canvas应用的小程序

canvas画图很强大，就类似于自己用圆规直尺在画板上画图一样

写的时候参照了网上其他代码，比如擦除表针要上下左右多擦除两个像素

写完之后才发现自己定义的needle类里面的rect()没写好，代码重用率低了，如果还有什么其他问题，欢迎指出

不罗嗦，放代码

index.html:

<!DOCTYPE HTML>
<html>
	<head>
		<title>
			My canvas
		</title>
	</head>
	<body>
		<canvas id = "drawing" width = "400" height = "400">
			Your browser doesn't support canvas!
		</canvas>
		<p id = "Date"></p>
		<script type="text/javascript" src="js/Canvas.js"></script>
	</body>
</html>

Canvas.js:

var c = document.getElementById("drawing");
var date = document.getElementById("Date");
var clock={
	pan : {
		panRect : function(cxt){
			cxt.beginPath();
			cxt.arc(0,0,100,0,2*Math.PI,true);
			cxt.stroke();
			cxt.closePath();
		},
		numRect : function(cxt){
			cxt.beginPath();
			for (var i = 0; i <60; i++){
				if(i % 5 == 0){
					if(i % 15 ==0){
						cxt.fillRect(80,-4,20,8);
					}					
					else
						cxt.fillRect(84,-3,16,6);
				}else{
					cxt.fillRect(90, -1, 10, 2);
				}
				cxt.rotate(2 * Math.PI/60);
			}
			cxt.closePath();
		},
		init:function(cxt){
			this.panRect(cxt);
			this.numRect(cxt);
		}
	},
	needle:{
		s : {
			angle : 0,
			len : 80,
			color : '#00ff00',
			rect : function(cxt,time){
				cxt.restore(); 
                		cxt.save();
				cxt.rotate(this.angle);
				cxt.clearRect(-13, -2, this.len + 2, 4);//要擦多两个像素
				cxt.restore();
				cxt.save();
				this.angle = (time.getSeconds()+time.getMilliseconds()/1000)* Math.PI / 30;//2 * Math.PI / 60
				cxt.rotate(this.angle);
				cxt.fillStyle=this.color;
				cxt.fillRect(-12,-1, this.len , 2);
			}			 
		},
		m : {
			angle : 0,
			len : 70,
			color : '#ff0000',
			rect : function(cxt,time){
				cxt.restore(); 
                cxt.save();
				cxt.rotate(this.angle);
				cxt.clearRect(-13, -3, this.len + 2, 6);
				cxt.restore();
				cxt.save();
				this.angle = (time.getSeconds()/60 + time.getMinutes()) * Math.PI / 30;
				cxt.rotate(this.angle);
				cxt.fillStyle=this.color;
				cxt.fillRect(-12,-2, this.len , 4);
			}
		},
		h : {
			angle : 0,
			len : 60,
			color : '#0000ff',
			rect : function(cxt,time){
				cxt.restore(); 
                cxt.save();
				cxt.rotate(this.angle);
				cxt.clearRect(-13, -4, this.len + 2, 8);
				cxt.restore();
				cxt.save();
				this.angle = (time.getMinutes()/60 + time.getHours()*5) * Math.PI / 30;
				cxt.rotate(this.angle);
				cxt.fillStyle=this.color;
				cxt.fillRect(-12,-3, this.len , 6);
			}
		},
		tickTack : function(cxt){
			var time = new Date();
			this.h.rect(cxt,time);
			this.m.rect(cxt,time);			
			this.s.rect(cxt,time);
			date.innerHTML=time;
		}
	},
	init : function(cxt){
		cxt.translate(200,200);
		cxt.rotate(-Math.PI / 2);
		cxt.save();
		with(clock){
			pan.init(cxt);			
           		var MyInterval = setInterval("clock.needle.tickTack(cxt)", 10); 
		}		
	}
};
if(c.getContext){
	var cxt = c.getContext("2d");
	cxt.strokeRect(0,0,c.width,c.height);	
	clock.init(cxt);
}

最终效果：

墨影司

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5 canvas 实现小时钟

正在看HTML5的相关内容，这个是关于canvas应用的小程序canvas画图很强大，就类似于自己用圆规直尺在画板上画图一样写的时候参照了网上其他代码，比如擦除表针要上下左右多擦除两个像素写完之后才发现自己定义的needle类里面的rect()没写好，代码重用率低了，如果还有什么其他问题，欢迎指出不罗嗦，放代码index.html: My canvas
复制链接

扫一扫

专栏目录