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把文件域由按鈕變成傳統的輸入框形式