canvas钟表(加事件)

最新推荐文章于 2024-09-26 15:40:17 发布

cxb8888

最新推荐文章于 2024-09-26 15:40:17 发布

阅读量262

点赞数

分类专栏： html5 文章标签： function chrome 浏览器 timer date blog

本文链接：https://blog.csdn.net/cxb8888/article/details/7875746

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文章转自IT老黑(strive) 地址：http://www.itstrive.com 温馨提示：亲……只兼容Chrome哦^_^!!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas钟表_by http://www.itstrive.com</title>
<style>
#c1{ background:-webkit-radial-gradient(#ccc,#930); display:block; margin:100px auto;}
body{ background:#000;}	
</style>
<script>
/*
	Aother:It老黑(strive);
	data:2012-8-16;
	QQ:707181108;
	blog:http://www.itstrive.com;
*/
function Rect(x,y,w,h,r){
	this.x=x;
	this.y=y;
	this.w=w;
	this.h=h;
	this.background='#36383a';
	this.borderColor='black';
	this.originX=this.w/2;
	this.originY=this.h/2;
}
Rect.prototype.draw=function(gd){
	gd.save();
	gd.beginPath();
	gd.translate(this.x,this.y);
	gd.rotate(d2a(this.r));
	
	gd.fillStyle=this.background;
	gd.strokeStyle=this.borderColor;
	gd.fillRect(-this.originX,-this.originY,this.w,this.h);
	gd.strokeRect(-this.originX,-this.originY,this.w,this.h);
	
	gd.closePath();
	gd.restore();
}
function d2a(n){
	return n*Math.PI/180;
}
function mouseInCicle(cx,cy,cr,x,y){
	var d=Math.sqrt(Math.pow(x-cx,2)+Math.pow(cy-y,2));	
	return d<cr;
}
window.οnlοad=function(){
	if(!/Chrom/g.test(navigator.userAgent)){alert('您的浏览器不支持此项功能，请您下载并安装chrome'); document.write('<a href="http://www.google.cn/chrome">下载chrome浏览器</a>');}
	var oC=document.getElementById('c1');
	var gd=oC.getContext('2d');
	var clockX=100,clockY=100,clockR=100,timer=null;
	var hour=new Rect(clockX,clockY,6,50);
	var min=new Rect(clockX,clockY,4,70);
	var sec=new Rect(clockX,clockY,2,90);
	hour.background='#111315';
	hour.borderColor='#111315';
	hour.originY=hour.h;
	min.background='#111315';
	min.borderColor='#111315';
	min.originY=min.h;
	sec.background='#111315';
	sec.borderColor='#111315';
	sec.originY=sec.h;
	oC.οnmοusedοwn=function(ev){
		if(!mouseInCicle(clockX,clockY,clockR,ev.offsetX,ev.offsetY))return;
		var disX=ev.clientX-clockX;
		var disY=ev.clientY-clockY;
		document.οnmοusemοve=function(ev){
			var l=ev.clientX-disX;
			var t=ev.clientY-disY;
			l=l<=105?105:l;
			t=t<=105?105:t;
			l=l>=690?690:l;
			t=t>=490?490:t;
			clockX=l;
			clockY=t;
			tick();
		}
		document.οnmοuseup=function(){
			document.οnmοusemοve=null;
			document.οnmοuseup=null;	
		}
		return false;
	}
	function tick(){
		gd.clearRect(0,0,oC.width,oC.height);
		gd.save()
		gd.beginPath();
		gd.lineWidth='10';
		gd.shadowOffsetX='0';
		gd.shadowOffsetY='0';
		gd.shadowBlur='20';
		gd.shadowColor='#999999';
		gd.strokeStyle='#36383a';
		gd.arc(clockX,clockY,clockR,0,d2a(360));
		gd.stroke();
		gd.restore();
		hour.x=clockX;
		hour.y=clockY;
		min.x=clockX;
		min.y=clockY;
		sec.x=clockX;
		sec.y=clockY;
		var oDate=new Date();
		hour.r=oDate.getHours()*30;
		hour.draw(gd);
		min.r=oDate.getMinutes()*6;
		min.draw(gd);
		sec.r=oDate.getSeconds()*6;
		sec.draw(gd);
		gd.beginPath();
		gd.fillStyle='#424345';
		gd.arc(clockX,clockY,10,0,d2a(360));
		gd.fill();
		
		//四个表盘针
		gd.beginPath();
		var sTop=new Rect(clockX,clockY,3,5);
		var sBottom=new Rect(clockX,clockY,3,5);
		var sLeft=new Rect(clockX,clockY,5,3);
		var sRight=new Rect(clockX,clockY,5,3);
		sTop.originY=sTop.h+90;
		sTop.draw(gd);
		
		sBottom.originY=sTop.h-95;
		sBottom.draw(gd);
		
		sLeft.originX=sTop.w+90;
		sLeft.draw(gd);
		
		sRight.originX=sTop.w-92;
		sRight.draw(gd);
		gd.closePath();
		
		gd.font='20px 宋体';
		gd.fillText('http://www.itstrive.com',300,520,500);
		gd.font='50px 黑体';	
		gd.fillText('可以拖拽的啊亲……',220,580,500);
	}
	timer=setInterval(tick,1000);
	tick();
	
}
</script>
</head>
<body>
<canvas id="c1" width="800" height="600">
	您的浏览器不支持canvas!
</canvas>
</body>
</html>