绘制如下图所示一个动静时钟
<body><canvas width="600px" height="600px" style="background-color: #ccc; display:block; margin: 0 auto"></canvas></body><script> window.onload = function(){ //获取canvas对象 var canvas = document.querySelector("canvas"); //获取上下文 var context = canvas.getContext("2d"); //封装一个函数，用来时钟的动静 function clock(){ //绘制圆盘 context.beginPath();//开始 context.arc(300,300,200,0,2*Math.PI); context.fillStyle = "pink";//圆盘的色彩 context.fill();//绘制圆盘 context.closePath();//完结 //绘制时刻度 for(var i=0; i<12; i++){ context.save();//保留 context.lineWidth = 4;//时针的宽度 context.beginPath(); context.translate(300,300);//将原点平移到圆心 context.rotate(i*(Math.PI*6));//360/12=30° 180°/30°=6 context.moveTo(0,-180); context.lineTo(0,-200); context.stroke();//绘制线条 context.fillStyle = "black";//线条的色彩 //绘制时钟数字 context.font = "28px bold";//字体大小为28px，加粗 context.rotate(Math.PI/6);//将字体旋转30° context.fillText(i+1,-7,-220);//数字回转-7，并且在圆外显示 context.closePath(); context.restore(); context.restore();//回滚 } //绘制分刻度 for(i=0; i<60; i++){ context.save(); context.translate(300,300);//平移到原点 context.rotate(i*(Math.PI/30)); context.beginPath(); context.moveTo(0,-190); context.lineTo(0,-200); context.stroke(); context.closePath(); context.restore(); } //获取以后工夫 var today = new Date(); //获取以后小时 var hour = today.getHours(); //获取分 var min = today.getMinutes(); //获取秒 var sec = today.getSeconds(); hour = hour+min/60; //绘制时针 context.save(); context.lineWidth = 3; context.translate(300,300); context.rotate(hour*(Math.PI/6)); context.beginPath(); context.moveTo(0,10); context.lineTo(0,-80); context.stroke(); context.closePath(); context.restore(); //绘制分针 context.save(); context.lineWidth = 2; context.translate(300,300); context.rotate(min*(Math.PI/30)); context.beginPath(); context.moveTo(0,10); context.lineTo(0,-100); context.stroke(); context.closePath(); context.restore(); //绘制秒针 context.save(); context.lineWidth=1; context.rotate(sec*(Math.PI/30)); context.strokeStyle = "red"; context.beginPath(); context.moveTo(0,10); context.lineTo(0,-120); context.stroke(); context.closePath(); context.restore(); //交叉处 context.save(); context.translate(300,300); context.beginPath(); context.fillStyle = "#ccc"; context.strokeStyle = "red"; context.arc(0,0,5,0,Math.PI*2); context.fill(); context.stroke(); context.closePath(); context.restore(); setTimeout(clock,1000);//超时模仿 } clock(); }</script>