共计 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>
正文完
