JSFiddle - React, Tailwind, and code Playground

by lian860911

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

  </head>

  <body>
    <canvas id='myCanvas' width="300" height="300"></canvas>

  </body>

</html>

CSS

#myCanvas {
          border: 1px gray solid;
        }

JavaScript

let drawArc = (ctx, strokeStyle, ...args) => {
          ctx.strokeStyle = strokeStyle;
          ctx.beginPath();
          ctx.arc(...args);
          ctx.closePath();
          ctx.stroke();
        }

        let drawPointer = (ctx, strokeStyle, lineWidth, coord) => {
          ctx.strokeStyle = strokeStyle;
          ctx.lineWidth = lineWidth;
          ctx.beginPath();
          ctx.moveTo(...coord);
          ctx.lineTo(150, 150);
          ctx.closePath();
          ctx.stroke();
        }

        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var agPerSec = Math.PI / 30;

        let strokeStyle = "rgb(200,0,0,0.8)";
        ctx.font = "28px serif";

        setInterval(() => {

          ctx.clearRect(0, 0, 300, 300);

          ctx.beginPath();

          let date = new Date();

          let secondAg = agPerSec * date.getSeconds();
          let minAg = agPerSec * date.getMinutes();
          let hourAg = agPerSec * (date.getHours() % 12 + date.getMinutes() /
            60) * 5;


          let coordSec = [150 + 80 * Math.sin(secondAg), 150 - 80 * Math.cos(secondAg)];
          let coordMin = [150 + 70 * Math.sin(minAg), 150 - 70 * Math.cos(minAg)]
          let coordHour = [150 + 50 * Math.sin(hourAg), 150 - 50 * Math.cos(hourAg)]

          drawPointer(ctx, strokeStyle, 1, coordSec);
          drawPointer(ctx, "rgb(50,100,0,0.9)", 2, coordMin);
          drawPointer(ctx, "rgb(0,200,50)", 3, coordHour);

          ctx.fillText(date.toLocaleString(), 8, 50);

          ctx.lineWidth = "2";

          let centerPointStrokeStyle = "rgb(220,22,200)";
          drawArc(ctx, centerPointStrokeStyle, 150, 71, 1, 0, Math.PI * 2, true);
          drawArc(ctx, centerPointStrokeStyle, 229, 150, 1, 0, Math.PI * 2, true);
          drawArc(ctx, centerPointStrokeStyle, 150, 229, 1, 0, Math.PI * 2, true);
          drawArc(ctx, centerPointStrokeStyle, 71, 150, 1, 0, Math.PI * 2, true);

         ...