画钟表是2D画图的老生常谈，我也不能免俗弄了一个。代码如下：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>钟表</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="200px" height="200px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ var canvas=document.getElementById('myCanvus'); canvas.width=200; canvas.height=200; context=canvas.getContext('2d'); context.translate(100,100); clock=new Clock(100); clock.init(); animate(); }; var context; var clock; function animate(){ context.clearRect(-100,-100,200,200);// 清屏 clock.paintBg(context); clock.paintScale(context); clock.paintNumbers(context); clock.paintPointers(context); if(true){ // 让浏览器自行决定帧速率 window.requestAnimationFrame(animate); } } // 钟表类 function Clock(radius){ this.radius=radius; this.img; this.init=function(){ this.img=new Image(); this.img.src="clock7.jpg"; } // 画背景 this.paintBg=function(ctx){ ctx.drawImage(this.img,66,50,880,880,-100,-100,200,200); }; // 画刻度 this.paintScale=function(ctx){ for(var i=0;i<60;i++){ var degree=i*6; var x=this.radius*Math.cos(getRad(degree)); var y=this.radius*Math.sin(getRad(degree)); ctx.strokeStyle = "black"; ctx.fillStyle="black"; ctx.beginPath(); if((i % 5)==0){ ctx.arc(x,y,1.5,0,Math.PI*2,false); }else{ //ctx.arc(x,y,0.5,0,Math.PI*2,false); } ctx.closePath(); ctx.fill(); } }; // 画数字 this.paintNumbers=function(ctx){ ctx.font="bold 16px 宋体"; ctx.fillStyle="Red"; ctx.fillText("XII",-12,-80); ctx.fillText("VI",-8,93); ctx.fillText("IX",-94,5); ctx.fillText("III",68,5); }; // 画指针 this.paintPointers=function(ctx){ var date = new Date(); var hour=date.getHours(); var minute=date.getMinutes(); var second=date.getSeconds(); ctx.font="bold 6px 宋体"; ctx.fillStyle="navy"; ctx.fillText(hour+":"+minute+":"+second,12,-50); var angleS=second*6; var angleM=minute*6; var angleH=hour*30+angleM/360*30; context.save(); context.rotate(getRad(-90)); var x,y; context.lineWidth=0.5; x=(this.radius-2)*Math.cos(getRad(angleS)); y=(this.radius-2)*Math.sin(getRad(angleS)); ctx.strokeStyle = "black"; ctx.beginPath(); ctx.moveTo(-x/3, -y/3); ctx.lineTo(x,y); ctx.stroke(); ctx.closePath(); context.lineWidth=1.5; x=(this.radius-8)*Math.cos(getRad(angleM)); y=(this.radius-8)*Math.sin(getRad(angleM)); ctx.strokeStyle = "yellow"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(x,y); ctx.stroke(); ctx.closePath(); context.lineWidth=2; x=(this.radius-25)*Math.cos(getRad(angleH)); y=(this.radius-25)*Math.sin(getRad(angleH)); ctx.strokeStyle = "maroon"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(x,y); ctx.stroke(); ctx.closePath(); context.restore(); ctx.fillStyle="black"; ctx.arc(0,0,2.5,0,Math.PI*2,false); ctx.fill(); }; } // 常规函数:角度得到弧度 function getRad(degree){ return degree/180*Math.PI; } // 常规函数:得到颜色 function getColor(index){ if(index==0){ return "green"; }else if(index==1){ return "silver"; }else if(index==2){ return "lime"; }else if(index==3){ return "gray"; }else if(index==4){ return "white"; }else if(index==5){ return "yellow"; }else if(index==6){ return "maroon"; }else if(index==7){ return "navy"; }else if(index==8){ return "red"; }else if(index==9){ return "blue"; }else if(index==10){ return "purple"; }else if(index==11){ return "teal"; }else if(index==12){ return "fuchsia"; }else if(index==13){ return "aqua"; }else if(index==14){ return "black"; } } //--> </script>
完整代码从这里下载：https://files.cnblogs.com/files/xiandedanteng/clock.rar
本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7498982.html，如需转载请自行联系原作者
