画钟表是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
HTML5 Canvas 画钟表
原文地址：http://www.cnblogs.com/xiandedanteng/p/7498982.html