HTML5|用HTML5 Canvas写了个时钟 HTML5|prototype

这周在学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); }

页面代码
【HTML5|用HTML5 Canvas写了个时钟】很短到一句