<!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>
</head>
<style>
body {
margin: 0;
padding: 0;
background: url("../images/grid.png");
}
#box{
background-color: rgba(255, 0, 0, 0.1);
}
#content {
width: 300px;
height: 300px;
background: black;
border-radius: 50px;
margin: 10px;
}
</style>
<body>
<div id="content">
<canvas id="box" width="300" height="300"></canvas>
</div>
</body>
<script>
window.onload = function() {
let canvasEl = document.getElementById("box")
let ctx = canvasEl.getContext("2d")
console.log(ctx)
requestAnimationFrame(draw)
function draw() {
// 清理画布
ctx.clearRect(0,0,300,300)
// 获取秒钟
let second = new Date().getSeconds()
// 获取分钟
let minute = new Date().getMinutes()
// 获取小时
let hour = new Date().getHours()
// 保留状态
ctx.save()
// 1.闹钟中心白色圆盘
ctx.save()
ctx.translate(150,150)
ctx.beginPath()
ctx.fillStyle = "white"
ctx.arc(0,0,130,0,2*Math.PI)
ctx.fill()
ctx.closePath()
ctx.restore()
// 2.绘制数字
ctx.save()
ctx.translate(150,150)
let num = [3,4,5,6,7,8,9,10,11,12,1,2]
// 水平对齐方式
ctx.textAlign = "center"
// 垂直对齐方式
ctx.textBaseline = "middle"
ctx.font = "16px sans-serif"
for(let i = 0; i < num.length; i++) {
ctx.fillText(num[i],100 * Math.cos(i * 2 * Math.PI / 12),100 * Math.sin(i * 2 * Math.PI / 12))
}
ctx.restore()
// 3.绘制时针
ctx.save()
ctx.translate(150,150)
ctx.rotate((hour * Math.PI * 2 / 12 + minute * Math.PI * 2 / 12 / 60 + second * Math.PI * 2 / 12 / 60 /60) - Math.PI / 2)
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineWidth = 6
ctx.lineCap = "round"
ctx.lineTo(40,0)
ctx.stroke()
ctx.closePath()
ctx.restore()
// 4.绘制分针
ctx.save()
ctx.translate(150,150)
ctx.rotate((minute * Math.PI * 2 / 60 + second * Math.PI * 2 / 60 /60) - Math.PI / 2)
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineWidth = 4
ctx.lineCap = "round"
ctx.lineTo(60,0)
ctx.stroke()
ctx.closePath()
ctx.restore()
// 5.绘制秒针
ctx.save()
ctx.translate(150,150)
ctx.rotate((second * Math.PI * 2 /60) - Math.PI / 2)
ctx.beginPath()
ctx.moveTo(0,0)
ctx.strokeStyle = "red"
ctx.lineWidth = 3
ctx.lineCap = "round"
ctx.lineTo(90,0)
ctx.stroke()
ctx.closePath()
ctx.restore()
// 5.绘制中心圆帽
ctx.save()
ctx.translate(150,150)
ctx.beginPath()
ctx.strokeStyle = "black"
ctx.lineWidth = 4
ctx.arc(0,0,6,0,2*Math.PI)
ctx.stroke()
ctx.closePath()
ctx.fillStyle = "gray"
ctx.beginPath()
ctx.arc(0,0,4,0,2*Math.PI)
ctx.fill()
ctx.closePath()
ctx.restore()
// 6.画出刻度（时）
ctx.save()
ctx.translate(150,150)
ctx.lineWidth = 4
for(let i = 0; i < 12; i++) {
ctx.rotate(2 * Math.PI / 12)
ctx.beginPath()
ctx.moveTo(130,0)
ctx.lineTo(122,0)
ctx.stroke()
ctx.closePath()
}
ctx.restore()
// 7.画出刻度（分）
ctx.save()
ctx.translate(150,150)
ctx.lineWidth = 2
for(let i = 0; i < 60; i++) {
ctx.rotate(2 * Math.PI /60)
ctx.beginPath()
ctx.moveTo(130,0)
ctx.lineTo(125,0)
ctx.stroke()
ctx.closePath()
}
ctx.restore()
ctx.restore()
requestAnimationFrame(draw)
}
}
</script>
</html>
