html画布实现一个时钟应用

</pre><pre name="code" class="javascript">//核心js逻辑

<script type="text/javascript">
	var canvas=document.getElementById("canvas");
	var cobj=canvas.getContext("2d");
	var originx=250;
	var originy=250;
    var radius=200;
    // 添加阴影

    setInterval(watch, 1000)
    
    function watch(){
    	cobj.clearRect(0, 0, 500, 500);
	    cobj.shadowColor="#888";
	    cobj.shadowOffsetX=3;
	    cobj.shadowOffsetY=3;
	    cobj.shadowBlur=5;
	    // 添加渐变色
	    var objColor=cobj.createRadialGradient(originx, originy, 1, originx, originy, 200);
	    objColor.addColorStop(0, "#efefef");
	    objColor.addColorStop(1, "#cecece");
	    cobj.fillStyle=objColor;

		cobj.beginPath();
		cobj.arc(originx, originy, radius,0,2*Math.PI);
		cobj.stroke();
		cobj.fill();    	
	    var date=new Date();
	    var ha=date.getHours()*30+date.getMinutes()*6/12-90;
	    var ma=date.getMinutes()*6-90;
	    var sa=date.getSeconds()*6-90;
	    drawPointer(80,ha);
	    drawPointer(100,ma);
	    drawPointer(120,sa);
		drawMark();
		drawBMark();	    
    }
    // 小刻度
	function drawMark(){
		for (var i = 0; i < 60; i++) {
			cobj.beginPath();
			cobj.moveTo(originx+radius*Math.cos(i*6*Math.PI/180), originy+radius*Math.sin(i*6*Math.PI/180));
			cobj.lineTo(originx+(radius-10)*Math.cos(i*6*Math.PI/180), originy+(radius-10)*Math.sin(i*6*Math.PI/180));
			cobj.stroke();
		};
	}
	// 大刻度
	function drawBMark(){
		for (var i = 0; i < 12; i++) {
			cobj.beginPath();
			cobj.lineWidth=3;
			cobj.moveTo(originx+radius*Math.cos(i*30*Math.PI/180), originy+radius*Math.sin(i*30*Math.PI/180));
			cobj.lineTo(originx+(radius-16)*Math.cos(i*30*Math.PI/180), originy+(radius-16)*Math.sin(i*30*Math.PI/180));
			cobj.stroke();
		};
	}

	//画针
	function drawPointer(radius,angle){
		cobj.beginPath();
		cobj.moveTo(originx, originy);
		cobj.lineTo(originx+radius*Math.cos(angle*Math.PI/180), originy+radius*Math.sin(angle*Math.PI/180));
		cobj.stroke();
	}	
</script>