钟表 出现文字表示你的浏览器不支持HTML5 draw(){ ); canvas.width=200; canvas.height=200; context); context.translate(); clock); clock.init(); animate(); }; var context; var clock; function animate(){ context.clearRect( clock.paintBg(context); clock.paintScale(context); clock.paintNumbers(context); clock.paintPointers(context); ){ // 让浏览器自行决定帧速率 window.requestAnimationFrame(animate); } } Clock(radius){ radius; this.img; (){ Image(); ; } (ctx){ ctx.drawImage(); }; (ctx){ ){ ; Math.cos(getRad(degree)); Math.sin(getRad(degree)); ctx.strokeStyle ; ctx.fillStyle; ctx.beginPath(); ){ ctx.arc(x,y,); }else{ //ctx.arc(x,y,0.5,0,Math.PI*2,false); } ctx.closePath(); ctx.fill(); } }; (ctx){ ctx.font; ctx.fillStyle; ctx.fillText(); ctx.fillText(); ctx.fillText(); ctx.fillText(); }; (ctx){ Date(); date.getHours(); date.getMinutes(); date.getSeconds(); ctx.font; ctx.fillStyle; ctx.fillText(hour); ; ; context.save(); context.rotate(getRad(-90)); var x,y; context.lineWidth=0.5; xMath.cos(getRad(angleS)); yMath.sin(getRad(angleS)); ctx.strokeStyle ; ctx.beginPath(); ctx.moveTo(); ctx.lineTo(x,y); ctx.stroke(); ctx.closePath(); context.lineWidth=1.5; xMath.cos(getRad(angleM)); yMath.sin(getRad(angleM)); ctx.strokeStyle ; ctx.beginPath(); ctx.moveTo(); ctx.lineTo(x,y); ctx.stroke(); ctx.closePath(); context.lineWidth=2; xMath.cos(getRad(angleH)); yMath.sin(getRad(angleH)); ctx.strokeStyle ; ctx.beginPath(); ctx.moveTo(); ctx.lineTo(x,y); ctx.stroke(); ctx.closePath(); context.restore(); ctx.fillStyle; ctx.arc(); ctx.fill(); }; } getRad(degree){ } getColor(index){ ){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; }){ ; } }