                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas 繪制時鐘

時鐘只顯示外圓

<!DOCTYPE?html><html><head>????<meta?name="viewport"?content="width=device-width,initial-scale=1">????<title>canvas時鐘</title>????<style?type="text/css">		div?{			text-align:?center;			margin-top:?250px;		}		#clock?{			border:?1px?solid?#ccc;		}????</style></head><body>????<div>????????<canvas?id="clock"?height="200px"?width="200px"></canvas>????</div>????????<script?type="text/javascript"?src="clock.js"></script></body></html>

var?dom?=?document.getElementById('clock');var?ctx?=?dom.getContext('2d');var?width?=?ctx.canvas.width;var?height?=?ctx.canvas.height;var?r?=?width?/?2;var?rem?=?width?/?200;function?drawBackground(){	ctx.save();	ctx.translate(r,r);	ctx.beginPath();	ctx.lineWidth?=?10?*?rem;	ctx.arc(0,0,r?-?ctx.lineWidth?/?2,0,2?*?Math.PI,false);	ctx.stroke();		var?hourNumbers?=?[3,4,5,6,7,8,9,10,11,12,1,2];	ctx.font?=18?*?rem?+?'px?Arial';	ctx.textAlign?=?'center';	ctx.textBaseline?=?'middle';	hourNumbers.forEach(function(number,i){		var?rad?=?2?*?Math.PI?/?12?*?i;?		var?x?=?Matn.cos(rad)?*?(r?-?30?*?rem);		var?y?=?Matn.sin(rad)?*?(r?-?30?*?rem);		ctx.fillText(number,x,y);	});		for?(var?i?=?0;i?<?60;?i++){		var?rad?=?2?*?Math.PI?/?60?*?i;		var?x?=?Matn.cos(rad)?*?(r?-?18?*?rem);		var?y?=?Matn.sin(rad)?*?(r?-?18?*?rem);		ctx.beginPath();		if?(i?%?5?===?0){			ctx.fillStyle?=?'#000';			ctx.arc(x,y,2?*?rem,0,2?*?Math.PI,false);		}else{			ctx.fillStyle?=?'#ccc';			ctx.arc(x,y,2?*?rem,0,2?*?Math.PI,false);		}		ctx.fill();	}}function?drawHour(hour,minute){	ctx.beginPath();	var?rad?=?2?*?Math.PI?/?12?*?hour;	var?mrad?=?2?*?Math.PI?/?12?/?60?*?minute;	ctx.rotate(rad?+?mrad);?	ctx.lineWidth?=?6?*?rem;	ctx.lineCap?=?'round';	ctx.moveTo(0,10?*?rem);	ctx.lineTo(0,-r?/?2);	ctx.stroke();}function?drawMinute(minute){	ctx.save();	ctx.beginPath();	var?rad?=?2?*?Math.PI?/?60?*?minute;	ctx.rotate(rad);?	ctx.lineWidth?=?3?*?rem;	ctx.lineCap?=?'round';	ctx.moveTo(0,10?*?rem);	ctx.lineTo(0,-r?+?30?*?rem);	ctx.stroke();	ctx.restore();	}function?drawSecond(second){	ctx.save();	ctx.beginPath();	ctx.fillStyle='#c14543';	var?rad?=?2?*?Math.PI?/?60?*?second;	ctx.rotate(rad);?	ctx.moveTo(-2?*?rem,20?*?rem);	ctx.lineTo(2?*?rem,20?*?rem);	ctx.lineTo(1,-r?+?18?*?rem);	ctx.lineTo(-1,-r?+?18?*?rem);	ctx.fill();	ctx.restore();	}function?drawDot(){	ctx.beginPath();	ctx.fillStyle='#fff';	ctx.arc(0,0,3?*?rem,0,2?*?Math.PI,false);}drawBackground();drawDot();function?draw(){	ctx.clearRect(0,0,width,height);	var?now?=?new?Date();	var?hour?=?now.getHours();	var?minute?=?now.getMinutes();	var?second?=?now.getSeconds();	drawBackground();	drawHour(hour,minute);	drawMinute(minute);	drawSecond(second);	drawDot();	ctx.restore();}setInterval(draw,1000)