JavaScript html5 canvas绘制时钟效果2

	作者：CC	今阅(1)	3日(1)	7日(1)
	发表时间:2024-04-16 14:11:03		30日(2)	总阅(19)

文章摘要：JavaScript html5 canvas绘制时钟效果2

你可以使用以下的 HTML 和 JavaScript 代码来绘制一个时钟效果的 HTML5 Canvas：

```html
<!DOCTYPE html>
<html>
<head>
  <title>Clock using HTML5 Canvas</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="clockCanvas" width="200" height="200"></canvas>

ctx.translate(radius, radius);
    radius = radius * 0.90;

function drawClock() {
      drawFace(ctx, radius);
      drawNumbers(ctx, radius);
    }

function drawFace(ctx, radius) {
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, 2*Math.PI);
      ctx.fillStyle = \'white\';
      ctx.fill();

ctx.strokeStyle = \'black\';
      ctx.lineWidth = radius * 0.1;
      ctx.stroke();
      ctx.closePath();
    }

function drawNumbers(ctx, radius) {
      let ang;
      let num;
      ctx.font = radius * 0.15 + "px arial";
      ctx.textBaseline = "middle";
      ctx.textAlign = "center";

for(num = 1; num < 13; num++){
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius * 0.85);
        ctx.rotate(-ang);
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius * 0.85);
        ctx.rotate(-ang);
      }
    }

function drawTime() {
      const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();

// Hour
      hour = hour % 12;
      hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
      drawHand(ctx, hour, radius*0.5, radius*0.07);

// Minute
      minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
      drawHand(ctx, minute, radius*0.8, radius*0.07);

// Second
      second = (second * Math.PI / 30);
      drawHand(ctx, second, radius*0.9, radius*0.02);
    }

function drawHand(ctx, pos, length, width) {
      ctx.beginPath();
      ctx.lineWidth = width;
      ctx.lineCap = "round";
      ctx.moveTo(0, 0);
      ctx.rotate(pos);
      ctx.lineTo(0, -length);
      ctx.stroke();
      ctx.rotate(-pos);
    }

setInterval(drawClock, 1000);
  </script>
</body>
</html>
```

这段代码会创建一个简单的时钟，利用 HTML5 Canvas 和 JavaScript 绘制出时钟效果。希望这对你有所帮

前一篇:html用title属性实现鼠标悬停显示文字_网页制作-html教程后一篇:HTML中head头结构_网页制作-html教程

豫ICP备16000183号-1