HTML5 canvas圆形时钟指针平缓转动随机切换表盘颜色



106 423 142



特效描述:HTML5 canvas圆形时钟 指针平缓转动 随机切换表盘颜色,使用HTML5制作的时钟,时针分针秒针平滑转动而不是蹦着走,每次进入网页或单机表盘会随即切换表盘边框的颜色。

代码结构

1. HTML代码

<div style="width:500px;margin:0 auto;">
	<canvas id="clock" width="500" height="500" onClick=resetcolor()>
		您的浏览器不支持canvas标签!
	</canvas>
</div>
<script>
	var clock=document.getElementById("clock");
	var cxt=clock.getContext("2d");
	var colr=(200+Math.floor(Math.random()*55.99));
	var colg=(200+Math.floor(Math.random()*55.99));
	var colb=(200+Math.floor(Math.random()*55.99));
	function resetcolor(){
		colr=(200+Math.floor(Math.random()*55.99));
		colg=(200+Math.floor(Math.random()*55.99));
		colb=(200+Math.floor(Math.random()*55.99));
	}
	function drawClock(){
	//获取时间
	var now=new Date();
	var hou=now.getHours();
	var min=now.getMinutes();
	var sec=now.getSeconds();
	var mec=now.getMilliseconds();
	//转换12小时进制
	hou=hou>12?hou-12:hou;
	//清空画布
	cxt.clearRect(0,0,500,500);
	//阴影
	cxt.fill();
	cxt.fillStyle="gray";
	cxt.beginPath();
	cxt.arc(270,260,205,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
	//表盘
	cxt.fill();
	cxt.fillStyle="white";
	cxt.beginPath();
	cxt.arc(250,250,205,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
	//蓝色表盘(边框)
	cxt.strokeStyle="#dddddd"
	cxt.lineWidth=10;
	cxt.beginPath();
	cxt.arc(250,250,185,0,Math.PI*2,true);
	cxt.closePath();
	cxt.stroke();
	cxt.strokeStyle="#"+colr.toString(16)+colg.toString(16)+colb.toString(16);
	cxt.lineWidth=10;
	cxt.beginPath();
	cxt.arc(250,250,200,0,Math.PI*2,true);
	cxt.closePath();
	cxt.stroke();
	cxt.strokeStyle="#"+colr.toString(16)+colg.toString(16)+colb.toString(16);
	cxt.lineWidth=3;
	cxt.beginPath();
	cxt.arc(250,250,192,0,Math.PI*2,true);
	cxt.closePath();
	cxt.stroke();
	cxt.strokeStyle="#"+(colr-100).toString(16)+(colg-100).toString(16)+(colb-100).toString(16);
	cxt.lineWidth=5;
	cxt.beginPath();
	cxt.arc(250,250,205,0,Math.PI*2,true);
	cxt.closePath();
	cxt.stroke();
	//刻度(时分)
		//时刻度
		for(var i=0;i<12;i++){
			cxt.save();
			cxt.lineWidth=5;
			cxt.strokeStyle="black";
			//设置原点
			cxt.translate(250,250);
			//设置旋转角度;
			cxt.rotate(30*i/180*Math.PI);
			cxt.beginPath();
			cxt.moveTo(0,180);
			cxt.lineTo(0,160);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
		}
		//分刻度
		for(var i=0;i<60;i++){
			if(i%5!=0){
				cxt.save();
				cxt.lineWidth=2;
				cxt.strokeStyle="black";
				//设置原点
				cxt.translate(250,250);
				//设置旋转角度;
				cxt.rotate(6*i/180*Math.PI);
				cxt.beginPath();
				cxt.moveTo(0,175);
				cxt.lineTo(0,165);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
			}
		}
	//指针(时分秒)
	//时针
	cxt.save();
	cxt.lineWidth=12;
	cxt.strokeStyle="black";
	cxt.beginPath();
	cxt.translate(250,250);
	cxt.rotate((hou*30+min*0.5+180)/180*Math.PI);
	cxt.moveTo(0,0);
	cxt.lineTo(0,90);
	cxt.closePath();
	cxt.stroke()
	cxt.restore();
	//分针
	cxt.save();
	cxt.lineWidth=5;
	cxt.strokeStyle="black";
	cxt.beginPath();
	cxt.translate(250,250);
	cxt.rotate((min*6+sec*0.1+180)/180*Math.PI);
	cxt.moveTo(0,0);
	cxt.lineTo(0,130);
	cxt.closePath();
	cxt.stroke()
	cxt.restore();
	//秒针
	cxt.save();
	cxt.lineWidth=2;
	cxt.strokeStyle="red";
	cxt.beginPath();
	cxt.translate(250,250);
	cxt.rotate((sec*6+mec*0.006+180)/180*Math.PI);
	cxt.moveTo(0,0);
	cxt.lineTo(0,150);
	cxt.closePath();
	cxt.stroke();
	cxt.fillStyle="red";
	cxt.beginPath();
	cxt.arc(0,148,4,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
	cxt.fillStyle="white";
	cxt.beginPath();
	cxt.arc(0,148,2,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
	cxt.restore();
	//秒针装饰
	cxt.fillStyle="red";
	cxt.beginPath();
	cxt.arc(250,250,15,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
	cxt.fillStyle="black";
	cxt.beginPath();
	cxt.arc(250,250,13,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
	cxt.fillStyle="white";
	cxt.beginPath();
	cxt.arc(250,250,10,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
}
drawClock();
//使用setInterval(代码,周期(毫秒制))让时钟动起来
setInterval(drawClock,10);
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 日期时间 时钟 日历 时间 日历插件 时间日期插件 时间日期插件 时间日期 背景切换 大图切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到