Canvas HTML5圆形挂钟动画版

2024-09-05 12:19:08

字体：大中小

来源：转载

供稿：网友

又一个HTML5时钟特效，圆形表盘+动画走动的指针，全部使得了Canvas和JavaScript技术结合实现，想学习HTML5编程的话，本时钟内有许多编程小技巧可以借鉴。比如表盘的设计、渐变色的添加、动画指针走动等，测试注意：要使用支持HTML5的浏览器，IE8不行哦，考虑火狐或Chrome。

<!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>

上一篇：HTML5坦克大战-网页小游戏

下一篇：HTML5把文件域由按钮变成传统的输入框形式