练习之模拟时钟

最新推荐文章于 2021-06-10 17:24:54 发布

一条带懒虫

最新推荐文章于 2021-06-10 17:24:54 发布

阅读量398

点赞数

文章标签： html5 canvas js

本文链接：https://blog.csdn.net/qq_22481167/article/details/42980259

版权

最近在学习html5，虽然这个出来已经很久了，但自己比较懒，一直没动心思去学。趁年末有时间，研究了下，发现确实比较好用，以前难以实现的功能，用新的技术简单就可以做出来，于是动手写了个模拟时钟，代码比较简单，权当练手吧。

js部分：

var Clock = function(circle,canvas){
	this.circle = circle;
	this.canvas = canvas;
	this.drawClock();
};
Clock.prototype.drawClock = function(){
	window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
	if(!this.canvas||!window.requestAnimationFrame){
		document.getElementById("content").innerHTML = '您的浏览器版本过低，不支持此功能';
		return;
	}
	var g = this.canvas.getContext('2d');
	var that = this;
	var draw = function(){
		g.clearRect(0,0,that.canvas.width,that.canvas.height);
		that.drawText(g);
		that.drawShortLine(g,that.circle);
		that.drawHandler(g,that.circle,that.circle.r*5/6,that.circle.r,that.circle.r*7/6,new Date());
		that.drawCenter(g,that.circle);
		requestAnimationFrame(draw);
	};
	requestAnimationFrame(draw);
};
Clock.prototype.drawCenter = function(g,circle){
	g.beginPath();
	g.arc(circle.x,circle.y,circle.r,0,Math.PI*2,true);
	g.closePath();
	g.lineWidth = 5;
	g.strokeStyle = '#000';
	g.stroke();
	g.beginPath();
	g.fillStyle = '#082';
	g.arc(circle.x,circle.y,5,0,Math.PI*2,true);
	g.closePath();
	g.fill();
};
Clock.prototype.drawText = function(g){
	g.fillStyle = "#000";
	g.font = "38px '宋体'";
	//12
	g.fillText(12,381,148);
	//6
	g.fillText(6,390,480);
	//9
	g.fillText(9,220,312);
	//3
	g.fillText(3,560,312);
};
Clock.prototype.drawShortLine = function(g,circle){
	g.lineWidth = 5;
		//12
	g.moveTo(circle.x,circle.y-circle.r);
	g.lineTo(circle.x,circle.y-circle.r+20);
	//6
	g.moveTo(circle.x,circle.y+circle.r);
	g.lineTo(circle.x,circle.y+circle.r-20);
	//3
	g.moveTo(circle.x+circle.r,circle.y);
	g.lineTo(circle.x+circle.r-20,circle.y);
	//9
	g.moveTo(circle.x-circle.r,circle.y);
	g.lineTo(circle.x-circle.r+20,circle.y);
	g.stroke();
	g.lineWidth = 3;
	//1-11
	for(var i=1;i<12;i++){
		if(i%3==0){
			continue;
		}
		g.moveTo(circle.x+circle.r*Math.sin(30*i*Math.PI/180),circle.y-circle.r*Math.cos(30*i*Math.PI/180));
		g.lineTo(circle.x+(circle.r-10)*Math.sin(30*i*Math.PI/180),circle.y-(circle.r-10)*Math.cos(30*i*Math.PI/180));
		g.stroke();
	}
	g.lineWidth = 1;
	for(var i=1;i<60;i++){
		if(i%5==0){
			continue;
		}
		g.moveTo(circle.x+circle.r*Math.sin(6*i*Math.PI/180),circle.y-circle.r*Math.cos(6*i*Math.PI/180));
		g.lineTo(circle.x+(circle.r-6)*Math.sin(6*i*Math.PI/180),circle.y-(circle.r-6)*Math.cos(6*i*Math.PI/180));
		g.stroke();
	}
};
Clock.prototype.drawHandler = function(g,circle,hourLength,minLength,secLength,date){
	var hour = date.getHours();
	if(hour>12){
		hour-=12;
	}
	var second = date.getSeconds();
	var minute = date.getMinutes();
	//draw minute hand
	g.beginPath();
	g.lineWidth = 3;
	g.moveTo(circle.x+minLength*4/5*Math.sin((minute*6+second/10)*Math.PI/180),circle.y-minLength*4/5*Math.cos((minute*6+second/10)*Math.PI/180));
	g.lineTo(circle.x+minLength/5*Math.sin((minute*6+second/10+180)*Math.PI/180),circle.y-minLength/5*Math.cos((minute*6+second/10+180)*Math.PI/180));
	g.stroke();
	g.beginPath();
	//draw hour hand
	g.lineWidth = 5;
	g.moveTo(circle.x+hourLength*4/5*Math.sin((hour*30+minute/2)*Math.PI/180),circle.y-hourLength*4/5*Math.cos((hour*30+minute/2)*Math.PI/180));
	g.lineTo(circle.x+hourLength/5*Math.sin((hour*30+minute/2+180)*Math.PI/180),circle.y-hourLength/5*Math.cos((hour*30+minute/2+180)*Math.PI/180));
	g.stroke();
	//draw second hand
	g.beginPath();
	g.strokeStyle = 'red';
	g.lineWidth = 1;
	g.moveTo(circle.x+secLength*4/5*Math.sin(second*6*Math.PI/180),circle.y-secLength*4/5*Math.cos(second*6*Math.PI/180));
	g.lineTo(circle.x+secLength/5*Math.sin((second*6+180)*Math.PI/180),circle.y-secLength/5*Math.cos((second*6+180)*Math.PI/180));
	g.stroke();
};

html:

<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>模拟时钟</title>
</head>
<body>
<bgsound id="aa" loop=1/>
<canvas id="can" width="800px" height="600px"></canvas>
<script>
var can = document.getElementById('can');
	var circle = {};
	circle.x = 400;
	circle.y = 300;
	circle.r = 200;
	new Clock(circle,can);
</script>
</body>
</html>

效果：