利用canvas画一个时钟
详细步骤
-
画中心圆点和刻度线
-
画时针
-
画分针
-
画秒针
下面是整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas style="border: solid 1px" id="canvas" height="100" width="100"></canvas>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// 绘制时钟：
function draw() {
// 获取当前时间：
const date = new Date()
let hour = date.getHours()
let second = date.getSeconds()
let minute = date.getMinutes()
// 每次循环都要先清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height)
let x = canvas.width / 2
let y = canvas.height / 2
let radius = canvas.height / 2
// 绘制表盘和中心点
ctx.beginPath()
ctx.arc(x, y, radius, 0, [(Math.PI) / 180] * 360)
ctx.stroke()
ctx.beginPath()
ctx.arc(x, y, 5, 0, [(Math.PI) / 180] * 360)
ctx.fill()
// 绘制时刻线
ctx.save(); //保存初始状态，原点(0,0)
ctx.translate(x, y) // 重新映射画布上的 (0,0) 位置为新的位置(x,y)
for (let i = 0; i < 60; i++) {
ctx.save()
ctx.beginPath()
ctx.rotate([(Math.PI) / 180] * 6 * i)
ctx.moveTo(0, -radius + 10)
ctx.lineTo(0, -radius)
// 当刻度为5的整数倍的时候，加粗：
if (i % 5 === 0) {
// 让时间刻度为5的倍数的刻度加粗：
ctx.lineWidth = 5
// 绘制时钟上的数字
ctx.save()
ctx.translate(0, -radius + 20)
ctx.rotate([-(Math.PI / 180)] * 6 * i)
ctx.font = '12px s'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillStyle = '#265cd2'
ctx.fillText(`${i / 5 === 0 ? 12 : i / 5}`, 0, 0, 20) // 绘制出1-12刻度文字
ctx.restore()
}
ctx.strokeStyle = 'rgb(255,106,0)'
ctx.stroke()
ctx.restore()
}
ctx.restore()
// 画时针
ctx.save()
ctx.translate(x, y)
//时针的角度等于整时的角度+已走分钟的角度+已走秒针的角度
ctx.rotate([hour * (Math.PI) / 180] * 30) // 一个小时转30°=360/12
ctx.rotate([minute * (Math.PI) / 180] * 0.5) // 一分钟转0.5°=30/60
ctx.rotate([second * (Math.PI) / 180] / 120) // 一分钟转1/120=30/60/60
// 或合并成一个语句 ctx.rotate(hour * (Math.PI / 6) + minute * (Math.PI / 360) + second * (Math.PI / 21600));
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(0, -radius / 2)
ctx.lineWidth = 4
ctx.stroke()
ctx.restore()
// 画分针
ctx.save()
ctx.translate(x, y)
ctx.translate(0, 0)
ctx.rotate((Math.PI) * 2 * minute / 60) // 换算分针的旋转角度
ctx.rotate([(Math.PI) / 180] * second / 10) // 换算分针的旋转角度
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(0, -radius / 3 * 2)
ctx.lineWidth = 4
ctx.strokeStyle = 'black'
ctx.stroke()
ctx.restore()
// 画秒针
ctx.save()
ctx.translate(x, y)
ctx.translate(0, 0)
ctx.rotate([(Math.PI) / 180] * second * 6) // 60秒走360°,一秒走6°
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(0, -radius + 10)
ctx.strokeStyle = '#ff0000'
ctx.stroke()
ctx.restore()
window.requestAnimationFrame(draw)
}
window.requestAnimationFrame(draw)
</script>
</body>
</html>
