共计 2974 个字符，预计需要花费 8 分钟才能阅读完成。
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <script> | |
| window.onload = function () {var canvas = document.querySelector('canvas') | |
| var context = canvas.getContext('2d') | |
| function clock() { | |
| // 绘制圆盘 | |
| context.beginPath() | |
| context.arc(300, 300, 200, 0, Math.PI * 2) | |
| context.fillStyle = 'yellow' | |
| context.fill() | |
| // 完结门路 | |
| context.closePath() | |
| // 绘制时刻度 | |
| for (i = 1; i <= 12; i++) {// save(): 将以后的绘画状态进行保留并存入状态栈 | |
| // 简而言之就是保留画刻度之前的状态 和 restore() 一起用 | |
| context.save() | |
| context.lineWidth = 4 | |
| context.beginPath() | |
| // 将原点平移 圆心地位 | |
| context.translate(300, 300) | |
| // 旋转 30 度 小时的刻度 | |
| // angle: 旋转角度，旋转的中心点就是坐标轴的原点 | |
| context.rotate(i * (Math.PI / 6)) | |
| // 绘制时刻度 从内向里画（反过来则要正数）context.moveTo(0, 200) | |
| context.lineTo(0, 180) | |
| context.stroke() | |
| context.fillStyle = 'black' | |
| // 调整数字的大小 | |
| context.font = '20px bold' | |
| // 数半径 | |
| context.fillText(i, -10, -150) | |
| context.closePath() | |
| // restore(): 该办法每次调用只会回滚到上一次 save 的状态 | |
| // 回退到画刻度之前的 save() 状态，不影响前面的时针，分针等等的绘制 | |
| context.restore()} | |
| // 绘制分刻度 分针要转 60 次 | |
| for (i = 1; i <= 60; i++) {context.save() | |
| // 平移原点 新的原点就是圆心 | |
| context.translate(300, 300) | |
| // 分针要转 60 次的 6 度 Math.PI 相当于 180 度 | |
| context.rotate(i * (Math.PI / 30)) | |
| context.beginPath() | |
| // 绘制分刻度 从里往外画 | |
| context.moveTo(0, -190) | |
| context.lineTo(0, -200) | |
| context.stroke() | |
| context.closePath() | |
| // 反复分刻度 | |
| context.restore()} | |
| // 利用内置函数 Date() 获取以后工夫 | |
| var date = new Date() | |
| // 打印看一下 | |
| console.log(date); | |
| // 获取以后的小时 | |
| var hours = date.getHours() | |
| // 获取以后分钟 | |
| var minutes = date.getMinutes() | |
| // 获取以后秒数 | |
| var seconds = date.getSeconds() | |
| // 打印看一下 | |
| console.log(hours, minutes, seconds); | |
| // 以后的小时数 | |
| hours = hours + minutes / 60; | |
| // 绘制时针 仍旧要保留绘画时针前的状态而后画完后回退 | |
| context.save() | |
| // 平移原点 | |
| context.translate(300, 300) | |
| // 小时乘以 30 度 | |
| // rotate(angle): 旋转角度，旋转的中心点就是坐标轴的原点 | |
| context.rotate(hours * (Math.PI / 6)) | |
| context.beginPath() | |
| context.lineWidth = 5 | |
| context.moveTo(0, 10) | |
| context.lineTo(0, -90) | |
| context.stroke() | |
| context.closePath() | |
| context.restore() | |
| // 绘制分针 | |
| context.save() | |
| // 平移原点 新原点就是圆心 | |
| context.translate(300, 300) | |
| // 先依据以后分钟旋转到那个地位 找到坐标 | |
| context.rotate(minutes * (Math.PI / 30)) | |
| // 再绘制分针 | |
| context.beginPath() | |
| // 调整时针线宽 | |
| context.lineWidth = 3 | |
| // 开始绘制 moveTo() 是挪动到分针的起始地位 | |
| context.moveTo(0, 10) | |
| //lineTo() 是画直线 (0, -120) 是完结坐标点 这个坐标点是绝对圆心来说的，因为后面 translate(300, 300) 曾经把原点平移到圆心的地位了 | |
| context.lineTo(0, -120) | |
| context.strokeStyle = 'blue' | |
| context.stroke() | |
| context.closePath() | |
| context.restore() | |
| // 绘制秒针 | |
| context.save() | |
| context.translate(300, 300) | |
| // 小时乘以 30 度 | |
| // angle: 旋转角度，旋转的中心点就是坐标轴的原点 | |
| context.rotate(seconds * (Math.PI / 30)) | |
| context.beginPath() | |
| // 调整线宽 也就是秒针的宽度 | |
| context.lineWidth = 2 | |
| // 绘制秒针 | |
| context.moveTo(0, 10) | |
| context.lineTo(0, -170) | |
| // 扭转秒针款式 | |
| context.strokeStyle = 'red' | |
| // 画的是轮廓图形 | |
| context.stroke() | |
| // 完结门路 | |
| context.closePath() | |
| // 回退状态 | |
| context.restore() | |
| // 绘制交叉处 | |
| // save(): 将以后的绘画状态进行保留并存入状态栈 | |
| context.save() | |
| context.translate(300, 300) | |
| // 开始门路 | |
| context.beginPath() | |
| // 绘制时钟两头的小圆 xy 轴开始地位 小圆半径 开始弧度 完结弧度 360 度 | |
| context.arc(0, 0, 5, 0, Math.PI * 2) | |
| // 填充圆设置为红色 | |
| context.fillStyle = 'white' | |
| // 轮廓圆设置红色 | |
| context.strokeStyle = 'red' | |
| // 绘制填充圆 | |
| context.fill() | |
| // 绘制轮廓圆 | |
| context.stroke() | |
| // 完结门路 | |
| context.closePath() | |
| context.restore() | |
| // 超时模仿间歇 防止载入时 时钟先隐没一小会儿再呈现 | |
| setTimeout(clock, 1000) | |
| } | |
| clock()} | |
| </script> | |
| </head> | |
| <body> | |
| <canvas width="600px" height="600px" style="background-color: rgb(154, 233, 243);"></canvas> | |
| </body> | |
| </html> |
正文完
