当前位置：首页 > 网页特效 > 时间日期 >

Canvas HTML5圆形挂钟动画版

时间：2014-03-20 08:45 来源：互联网作者：源码搜藏收藏推荐

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<SCRIPT LANGUAGE='JavaScript'> 
//屏蔽js错误 
function ResumeError() { 
return true; 
} 
window.onerror = ResumeError; 
</SCRIPT>
</head>
<body>
<h2>canvas 挂钟</h2>
<canvas id="clock" width="500" height="500">
	你的破
          
          浏览器不支持canvas标签，无法看到我们的激情小图片
</canvas>
<script>
	var clock=document.getElementById('clock');
	var cxt=clock.getContext('2d');
	var now1 = new Date();
	//表的配色
	//var bp = '#FFFFFF';//表盘
	var bk = '#ff9900';//表框
	var sk = '#0066CC';//时刻度
	var fk = '#0066CC';//分刻度
	var sz = '#333399';//时针
	var fz = '#333399';//分针
	var mz = '#CCCC00';//秒针
	var mh = '#FF0033';//秒针后小圆点
	var mq = '#FF0033';//秒针钱小圆点
	function drawClock(){
	//清除画布
	cxt.clearRect(0,0,500,500);
	var now =new Date();
	var msec = now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours();
	//小时必须获取浮点类型(小时+分数转化成的小时)
	hour=hour+min/60;
	//问题 19:23:30
	//将24小时进制转换为12小时
	hour=hour>12?hour-12:hour;
	//表盘(蓝色)
	//设置渐变色
	var bbp = cxt.createRadialGradient(250,250,0,250,250,250);
	bbp.addColorStop(0.4,'#fff');
	bbp.addColorStop(1,'#ffcc00');
	cxt.lineWidth=12;
	cxt.strokeStyle=bk;
	cxt.fillStyle = bbp;
	cxt.beginPath();
	cxt.arc(250,250,200,0,360,false);
	cxt.closePath();
	cxt.stroke();
	cxt.fill();
	//刻度
		//时刻度
		for(var i=0;i<12;i++){
			cxt.save();
			//设置时针的粗细
			cxt.lineWidth=7;
			//设置时针的颜色
			cxt.strokeStyle=sk;
			//先设置0,0点
			cxt.translate(250,250);
			//再设置旋转角度
			cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
			cxt.beginPath();
			cxt.moveTo(0,-170);
			cxt.lineTo(0,-190);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
		}
		//分刻度
		for(var i=0;i<60;i++){
			cxt.save();
			//设置分刻度的粗细
			cxt.lineWidth=5;
			//设置颜色(使用时刻度的颜色)
			cxt.strokeStyle=fk;
			//设置或者重置画布的0，0点
			cxt.translate(250,250);
			//设置旋转角度
			cxt.rotate(i*6*Math.PI/180);
			//画分针刻度
			cxt.beginPath();
			cxt.moveTo(0,-180);
			cxt.lineTo(0,-190);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
		}
		//时针
		cxt.save();
		//设置时针风格
		cxt.lineWidth=7;
		//设置时针的颜色
		cxt.strokeStyle=sz;
		//设置异次元空间的0，0点
		cxt.translate(250,250);
		//设置旋转角度
		cxt.rotate(hour*30*Math.PI/180);
		cxt.beginPath();
		cxt.moveTo(0,-110);
		cxt.lineTo(0,10);
		cxt.closePath();
		cxt.stroke();
		cxt.restore();
		//分针
		cxt.save();
		//设置分针的风格
		cxt.lineWidth=5;
		cxt.strokeStyle=fz;
		//设置异次元空间分针画布的圆心
		cxt.translate(250,250);
		//设置旋转角度
		cxt.rotate(min*6*Math.PI/180);
		cxt.beginPath();
		cxt.moveTo(0,-140);
		cxt.lineTo(0,15);
		cxt.closePath();
		cxt.stroke();
		cxt.restore();
		//秒针
		cxt.save();
		//设置秒针的风格
		//颜色红色
		cxt.strokeStyle=mz;
		//粗细 3像素
		cxt.lineWidth=3;
		//重置0，0点
		cxt.translate(250,250);
		//设置旋转角度
		//cxt.rotate(sec + msec*0.006*Math.PI/180);
		cxt.rotate((sec+msec/1000)*6*Math.PI/180);
		//画图
		cxt.beginPath();
		cxt.moveTo(0,-170);
		cxt.lineTo(0,20);
		cxt.closePath();
		cxt.stroke();
		//画出时针、分针、秒针的交叉点、
		cxt.beginPath();
		cxt.arc(0,0,5,0,360,false);
		cxt.closePath();
		//设置填充样式
		cxt.fillStyle=mh;
		cxt.fill();
		//设置笔触样式(秒针已设置)
		cxt.stroke();
		//设置秒针前段的小圆点
		cxt.beginPath();
		cxt.arc(0,-150,5,0,360,false);
		cxt.closePath();
		//设置填充样式
		cxt.fillStyle=mq;
		cxt.fill();
		//设置笔触样式(秒针已设置)
		cxt.stroke();
		cxt.restore();
	}
	//使用setInterval(代码,毫秒时间)  让时钟动起来
	drawClock();
	setInterval(drawClock,50);
</script>
</body>
</html>

网页特效

Canvas HTML5圆形挂钟动画版

时间日期下载排行

最新文章