<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="400"height="400"></canvas><scripttype="text/javascript">//getthecanvasvarmyCanvas=document.getElementById("myCanvas");varctx=myCanvas.getContext("2d");functionshowClock(){ctx.save();ctx.save();ctx.save();ctx.save();ctx.save();ctx.save();ctx.save();ctx.clearRect(0,0,400,400);//createtheclockborderctx.restore();ctx.beginPath();ctx.strokeStyle="pink";ctx.lineWidth=10;ctx.arc(200,200,150,0,Math.PI*2,true);ctx.stroke();//createthehouriconctx.restore();ctx.lineWidth=8;ctx.strokeStyle="blue";ctx.translate(200,200);for(vari=0;i<12;i++){ctx.beginPath();ctx.moveTo(135,0);ctx.lineTo(150,0);ctx.rotate(Math.PI/6);ctx.stroke();}//createtheminuteiconctx.restore();ctx.lineWidth=4;ctx.strokeStyle="blue";ctx.translate(200,200);for(vari=0;i<60;i++){ctx.beginPath();ctx.moveTo(145,0);ctx.lineTo(150,0);ctx.rotate(Math.PI/30);ctx.stroke();}vardate=newDate();varhour=date.getHours();varminute=date.getMinutes();varsecond=date.getSeconds();hour=hour>=12?hour-12:hour;//createthehourhandctx.restore();ctx.lineWidth=14;ctx.strokeStyle="pink";ctx.translate(200,200);ctx.rotate(hour*(Math.PI/6)+(Math.PI/360)*minute+(Math.PI/21600)*second-Math.PI/2);ctx.beginPath();ctx.moveTo(-20,0);ctx.lineTo(90,0);ctx.stroke();//createtheminutehandctx.restore();ctx.lineWidth=10;ctx.strokeStyle="pink";ctx.translate(200,200);ctx.rotate((Math.PI/30)*minute+(Math.PI/1800)*second-Math.PI/2);ctx.beginPath();ctx.moveTo(-30,0);ctx.lineTo(125,0);ctx.stroke();//createthesecondhandctx.restore();ctx.lineWidth=4;ctx.strokeStyle="pink";ctx.translate(200,200);ctx.rotate((Math.PI/30)*second-Math.PI/2);ctx.beginPath();ctx.moveTo(-35,0);ctx.lineTo(135,0);ctx.stroke();ctx.restore();setTimeout(showClock,1000);}showClock();</script></body></html>