这周在学canvas，就写了个时钟练习练习
window.onload = function(){
var Timer = function(canvas_id){
this.canvas = document.getElementById(canvas_id);
this.ctx = this.canvas.getContext('2d');
this.width = this.canvas.width;
this.height = this.canvas.height;
};
Timer.prototype = {
draw:function(){
this.ctx.save();
this.ctx.translate(0,0);
this.ctx.clearRect(0,0,this.width,this.height);
this.drawBackground();
this.drawClock();
this.drawClockPoint();
this.ctx.restore();
},
drawBackground:function(){
this.ctx.globalAlpha = 0.5;
this.ctx.fillStyle = 'blue';
this.ctx.fillRect(0,0,this.width,this.height);
},
drawClock:function(){
//move to center
this.ctx.translate(this.width/2,this.height/2);
//inner arc
//
this.ctx.fillStyle = '#333333';
this.ctx.beginPath();
this.ctx.arc(0,0,(this.width)/20,0,Math.PI*2,true);
this.ctx.fill();
//
//outer arc
this.ctx.fillStyle = 'yellow';
this.ctx.beginPath();
this.ctx.arc(0,0,(this.width/2),0,Math.PI*2,true);
this.ctx.fill();
// Outer arc line
for(var i=0;i<60;i++){
this.ctx.save();
this.ctx.rotate(Math.PI*2/60*i)
this.ctx.beginPath();
if(i % 5 == 0){
this.ctx.moveTo((this.width/2.5),0);
}else{
this.ctx.moveTo((this.width/2.2),0);
}
this.ctx.lineTo(this.width/2,0)
this.ctx.stroke();
this.ctx.restore();
}
},
drawClockPoint:function(){
var currentDate = new Date();
var hour = currentDate.getHours();
var minute = currentDate.getMinutes();
var second = currentDate.getSeconds();
// alert(second);
//画秒钟
this.ctx.save();
// this.ctx.fillStyle = 'black';
this.ctx.rotate(Math.PI*2/60*second - Math.PI/2)
this.ctx.beginPath();
this.ctx.moveTo(0,0);
this.ctx.lineTo(this.width/2,0);
this.ctx.stroke();
this.ctx.restore();
//画分钟
this.ctx.save();
// this.ctx.lineWidth=5;
this.ctx.fillStyle = 'black';
this.ctx.rotate(Math.PI*2/60*(minute+second/60) - Math.PI/2)
this.ctx.beginPath();
this.ctx.moveTo(0,0);
this.ctx.lineTo(this.width/3,0);
this.ctx.stroke();
this.ctx.restore();
//画时钟
this.ctx.save();
// this.ctx.lineWidth=10;
this.ctx.fillStyle = 'black';
this.ctx.rotate(Math.PI*2/12*(hour+minute/60+second/3600) - Math.PI/2)
this.ctx.beginPath();
this.ctx.moveTo(0,0);
this.ctx.lineTo(this.width/3.5,0);
this.ctx.stroke();
this.ctx.restore();
}
};
var timer = new Timer('canvas');
timer.draw();
function run (){
timer.draw();
}
window.setInterval(run,1000);
}
?页面代码
很短到一句
<canvas id='canvas' width='200' height='200'></canvas>
?
?
?
?
?