canvas制作闹钟

最新推荐文章于 2022-10-14 15:24:55 发布

wanan1215

最新推荐文章于 2022-10-14 15:24:55 发布

阅读量266

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/wanan1215/article/details/124230426

版权

<!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>
<style>
canvas{
border: 1px solid pink;
}
</style>
</head>
<body>
<canvas width="400" height="400" id="canvas"></canvas>
</body>

let du = Math.PI/180

//时间
// c.rotate(180*du)

// 每过一秒执行一次
setInterval(()=>{
c.clearRect(-200,-200,400,400)

let time = new Date()

let h = time.getHours()
h = h > 12 ? h - 12 : h
let m = time.getMinutes()
let s = time.getSeconds()

c.font="20px Arial";

// 画圆
c.beginPath()
c.arc(0,0,150,0,du*360);
c.strokeStyle='yellowgreen'
c.stroke()
c.closePath()

c.beginPath()
c.arc(0,0,130,0,du*360);
c.strokeStyle='gray'
c.stroke()
c.closePath()

//秒针
c.save()
c.beginPath()
c.rotate(-90*du)
c.rotate(s*6*du)
c.moveTo(-20,0)
c.strokeStyle='gray'
c.lineWidth='1'
c.lineTo(120,0)
c.stroke()
c.closePath()
c.restore()

//时针
c.save()
c.beginPath()
c.rotate(-90*du)
c.rotate(h*30*du)
c.moveTo(-20,0)
c.strokeStyle='yellowgreen'
c.lineWidth='4'
c.lineTo(80,0)
c.stroke()
c.closePath()
c.restore()

//分针
c.save()
c.beginPath()
c.rotate(-90*du)
c.rotate(m*6*du)
c.moveTo(-20,0)
c.strokeStyle='yellow'
c.lineWidth='3'
c.lineTo(100,0)
c.stroke()
c.closePath()
c.restore()

// 画分钟刻度
for(let i=0;i<60;i++){

c.beginPath()
c.rotate(6*du)
c.strokeStyle='orange'
c.lineWidth='3'
c.moveTo(140,0)
c.lineTo(150,0)
c.stroke()
c.closePath()

}
// c.save()
// 画小时刻度
//
for(let i=0;i<12;i++){
c.beginPath()
c.rotate(30*du)
c.strokeStyle='pink'
c.lineWidth='6'
c.moveTo(130,0)
c.lineTo(150,0)
// c.rotate(180*du)
c.stroke()
c.closePath()

}

// 数字
c.fillText("12",-10,-110)
c.fillText("11",-65,-90)
c.fillText("10",-115,-50)
c.fillText("9",-125,10)
c.fillText("8",-105,70)
c.fillText("7",-65,110)
c.fillText("1",55,-90)
c.fillText("2",95,-50)
c.fillText("3",115,10)
c.fillText("4",95,70)
c.fillText("5",55,110)
c.fillText("6",-5,120)

m=m<10 ? '0'+m :m ;
s=s<10 ? '0'+s :s ;

c.beginPath()
// c.rotate(180*du)
// 数字化显示
c.fillText(h+':'+m+':'+s,-25,170)
c.closePath()
// c.rotate(180*du)
// 时间数字
// c.fillText((i+1),-4,120)

// 螺丝
c.beginPath()
c.lineWidth='2'
c.strokeStyle='pink'
c.arc(0,0,7,0,du*360)
c.stroke()
c.closePath()

},1000)

</script>
</html>