.myClass{
margin: 20px atuo;
position:relative;
width:800px;
}
#panel{
border: 1px solid #CCC;}
var thisObj = function(){
this.canvas = document.getElementById("panel");
this.context = this.canvas.getContext("2d");
this.hour = 1;
this.minute = 29;
this.second = 1;
}
var i;
i = window.setInterval(function(){
thisObj.context.clearRect(-200, -100, thisObj.canvas.width, thisObj.canvas.height);
setObjValue();
drawHour();
drawHourFont();
drawMinute();
drawCenter();
drawClockwise();
drawMinuteHand();
drawSeconds();
setAuthor();
},10);
function setObjValue(){
if(thisObj.second == 60){
thisObj.second = 1;
thisObj.minute = thisObj.minute + 1;
}
if(thisObj.minute == 60){
thisObj.minute = 1;
thisObj.hour = thisObj.hour + 1;
}
thisObj.second = thisObj.second + 1;
}
function init(){
thisObj = new thisObj();
thisObj.context.translate(200, 100);
}
//小时
function drawHour(){
thisObj.context.save();
thisObj.context.strokeStyle = '#FF0000';
thisObj.context.beginPath();//注意
thisObj.context.arc(200, 100, 150, 0, Math.PI * 2, false);
thisObj.context.stroke();
thisObj.context.restore();
}
//设置字
function drawHourFont(){
saveAndRestore(function(){
var j = 4;
thisObj.context.lineWidth = 4;
for(var i = 0; i < 12; i ++){
thisObj.context.rotate(Math.PI / 6);
thisObj.context.beginPath();
thisObj.context.moveTo(140, 0);
thisObj.context.lineTo(150, 0);
thisObj.context.fillText(j+"点", 160, 0);
j = (j == 12 ? 0: j);
j++;
thisObj.context.stroke();
}
});
}
//分钟
function drawMinute(){
saveAndRestore(function(){
for(var i = 0; i < 60; i ++){
if(i % 5 != 0){
thisObj.context.beginPath();
thisObj.context.moveTo(145, 0);
thisObj.context.lineTo(150, 0);
thisObj.context.stroke();
}
thisObj.context.rotate(Math.PI / 30);
}
});
}
//圆心
function drawCenter(){
saveAndRestore(function(){
thisObj.context.beginPath();
//thisObj.context.fillStyle = '#0000FF';
thisObj.context.arc(0,0, 10, 0, Math.PI * 2, false);
thisObj.context.fill();
});
}
//时针
function drawClockwise(){
saveAndRestore(function(){
thisObj.context.rotate(thisObj.hour * (Math.PI / 6));
commHand(0);
});
}
//分针
function drawMinuteHand(){
saveAndRestore(function(){
thisObj.context.rotate(thisObj.minute * (Math.PI / 30));
commHand(-30);
});
}
//秒针
function drawSeconds(){
saveAndRestore(function(){
thisObj.context.rotate(thisObj.second * (Math.PI / 30));
commHand(-60);
});
}
function commHand(i){
thisObj.context.fillRect(-5, -2, 10, -60 + i);
thisObj.context.fill();
thisObj.context.lineJoin = 'round';
thisObj.context.moveTo(-10, -61+ i);
thisObj.context.lineTo(0, -70+ i);
thisObj.context.lineTo(10, -61+ i);
thisObj.context.lineTo(10, -61+ i);
thisObj.context.lineTo(-10, -61+ i);
thisObj.context.fill();
}
function saveAndRestore(funCall){
thisObj.context.save();
thisObj.context.translate(200, 100);
funCall();
thisObj.context.restore();
}
function setAuthor(){
saveAndRestore(function(){
thisObj.context.font = '20px impact';
thisObj.context.fontStyle = '#FF0000';
thisObj.context.fillText('作者:王明', 260, 150);
thisObj.context.fillText('2012年10月18日', 260, 180);
thisObj.context.stroke();
});
}
window.addEventListener("load", init, true);
<div class="myClass">
<canvas id="panel" width="800" height="433" />
</div>