使用js和canvas实现时钟效果_JavaScript

使用js和canvas实现时钟效果

2021-09-18 17:07HaiRong_21 JavaScript

这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用js和canvas写一个时钟，供大家参考，具体内容如下

				?

									<!DOCTYPE html>`

									<html lang="en">

									<head>

									  <meta charset="UTF-8">

									  <meta name="viewport" content="width=device-width, initial-scale=1.0">

									  <title>Document</title>

									</head>

									<body>

									  <canvas id='canvas' width='600' height='600' style="border: 1px solid red;"></canvas>

									  <script>

									    /** @type {HTMLCanvasElement} */

									    let canvas = document.querySelector("#canvas");

									    let ctx = canvas.getContext("2d");

									    let deg = Math.PI / 180;

									    let HourR = 100;

									    let MinutesR = 135;

									    let SecondsR = 170;

									    setInterval(function () {

									      canvas.width = canvas.width;

									      ctx.arc(300, 300, 200, 0, Math.PI * 2)

									      ctx.fillStyle = 'rgba(10,100,30,0.2)'

									      ctx.strokeStyle = 'red'

									      //获取当前时间

									      let dt = new Date()

									      let Hour = dt.getHours()

									      let Minutes = dt.getMinutes()

									      let Seconds = dt.getSeconds()

									      //时钟

									      ctx.moveTo(300, 300);

									      let xx = HourR * (Math.sin(Hour * 30 * deg))

									      let yy = HourR * (Math.cos(Hour * 30 * deg))

									      ctx.lineTo((300 + xx), (300 - yy))

									      //分钟和秒钟

									      function move(time, R) {

									        ctx.moveTo(300, 300);

									        xx = R * (Math.sin(time * 6 * deg))

									        yy = R * (Math.cos(time * 6 * deg))

									        ctx.lineTo((300 + xx), (300 - yy))

									      }

									      //小时指针

									      for (let m = 0; m < 12; m++) {

									        let xx = 190 * (Math.sin(m * 30 * deg))

									        let yy = 190 * (Math.cos(m * 30 * deg))

									        let xx1 = 200 * (Math.sin(m * 30 * deg))

									        let yy1 = 200 * (Math.cos(m * 30 * deg))

									        ctx.moveTo((300 + xx), (300 - yy));

									        ctx.lineTo((300 + xx1), (300 - yy1))

									      }

									      move(Seconds, SecondsR)

									      move(Minutes, MinutesR)

									      ctx.fill()

									      ctx.stroke()

									    }, 1000)

									  </script>

									</body>

									</html>