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