之前一直没有怎么了解过canvas，因此刚学习了下，特此记录
整个绘制的过程可以分为表盘外圈的绘制，刻度的绘制，时分秒针的绘制，获取时间，执行定时器
1.表盘的绘制
html
<canvas id="canvas1" width="800" height="600"></canvas>
js
var canvas1=document.querySelector("#canvas1")
var ctx=canvas1.getContext("2d")
ctx.beginPath()
ctx.translate(400,300)
ctx.rotate(-2*Math.PI/4)
ctx.save()
// 绘制表盘
ctx.arc(0,0,200,0,2*Math.PI)
ctx.strokeStyle="grey"
ctx.lineWidth=10
ctx.stroke()
ctx.closePath()
2.刻度的绘制
for(var i= 0;i<12;i++){
ctx.rotate(Math.PI/6)
ctx.beginPath()
ctx.moveTo(180,0)
ctx.lineTo(200,0)
ctx.strokeStyle="darkgrey"
ctx.stroke()
ctx.closePath()
}
ctx.restore()
ctx.save()
// 分针刻度
for(var i= 0;i<60;i++){
ctx.rotate(Math.PI/30)
ctx.beginPath()
ctx.lineWidth=2
ctx.moveTo(185,0)
ctx.lineTo(200,0)
ctx.strokeStyle="darkgrey"
ctx.stroke()
ctx.closePath()
}
ctx.restore()
ctx.save()
3.获取时间，并且和转动的角度关联
var time=new Date()
var hour=time.getHours()
var min=time.getMinutes()
var sec=time.getUTCSeconds()
var hour=hour>12?hour-12:hour
console.log(hour);
// 绘制秒针
ctx.beginPath()
ctx.rotate(2*Math.PI/60*sec)
ctx.lineWidth=2
ctx.moveTo(-30,0)
ctx.lineTo(170,0)
ctx.strokeStyle="red"
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()
// 绘制分针
ctx.beginPath()
ctx.rotate(2*Math.PI/60*min + 2*Math.PI/3600*sec)
ctx.lineWidth=3
ctx.moveTo(-20,0)
ctx.lineTo(150,0)
ctx.strokeStyle="darkblue"
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()
//绘制时针
ctx.beginPath()
ctx.rotate(2*Math.PI/12*hour + 2*Math.PI/720*min)
ctx.lineWidth=5
ctx.moveTo(-20,0)
ctx.lineTo(120,0)
ctx.strokeStyle="black"
ctx.stroke()
ctx.closePath()
4.每秒执行一次函数
setInterval(function(){
renderClock()
},1000)
5.demo全部代码
<!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>
<body>
<canvas id="canvas1" width="800" height="600"></canvas>
</body>
<script>
var canvas1=document.querySelector("#canvas1")
var ctx=canvas1.getContext("2d")
//绘制图像
// var img =new Image()
// img.src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.xfdown.com%2Fuploads%2F2019-4%2F2019429171535885980.jpg&refer=http%3A%2F%2Fpic.xfdown.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645080830&t=3f3a5525a5f97628b62378a32a4e92d1"
// img.onload=function(){
// ctx.drawImage(img,50,50,200,150)
// }
// 绘制表盘
function renderClock(){
ctx.clearRect(0,0,800,600)
ctx.save()
// 将坐标中心点移动到画布的中央
ctx.beginPath()
ctx.translate(400,300)
ctx.rotate(-2*Math.PI/4)
ctx.save()
// 绘制表盘
ctx.arc(0,0,200,0,2*Math.PI)
ctx.strokeStyle="grey"
ctx.lineWidth=10
ctx.stroke()
ctx.closePath()
// 绘制刻度
for(var i= 0;i<12;i++){
ctx.rotate(Math.PI/6)
ctx.beginPath()
ctx.moveTo(180,0)
ctx.lineTo(200,0)
ctx.strokeStyle="darkgrey"
ctx.stroke()
ctx.closePath()
}
ctx.restore()
ctx.save()
// 分针刻度
for(var i= 0;i<60;i++){
ctx.rotate(Math.PI/30)
ctx.beginPath()
ctx.lineWidth=2
ctx.moveTo(185,0)
ctx.lineTo(200,0)
ctx.strokeStyle="darkgrey"
ctx.stroke()
ctx.closePath()
}
ctx.restore()
ctx.save()
var time=new Date()
var hour=time.getHours()
var min=time.getMinutes()
var sec=time.getUTCSeconds()
var hour=hour>12?hour-12:hour
console.log(hour);
// 绘制秒针
ctx.beginPath()
ctx.rotate(2*Math.PI/60*sec)
ctx.lineWidth=2
ctx.moveTo(-30,0)
ctx.lineTo(170,0)
ctx.strokeStyle="red"
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()
// 绘制分针
ctx.beginPath()
ctx.rotate(2*Math.PI/60*min + 2*Math.PI/3600*sec)
ctx.lineWidth=3
ctx.moveTo(-20,0)
ctx.lineTo(150,0)
ctx.strokeStyle="darkblue"
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()
//绘制时针
ctx.beginPath()
ctx.rotate(2*Math.PI/12*hour + 2*Math.PI/720*min)
ctx.lineWidth=5
ctx.moveTo(-20,0)
ctx.lineTo(120,0)
ctx.strokeStyle="black"
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.arc(0,0,10,0,2*Math.PI)
ctx.fillStyle="blue"
ctx.fill()
ctx.closePath()
ctx.restore()
ctx.restore()
ctx.save()
}
setInterval(function(){
renderClock()
},1000)
</script>
</html>
