共计 2197 个字符，预计需要花费 6 分钟才能阅读完成。
绘制如下图所示一个动静时钟
| <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> |
正文完
