Question

我正在尝试使用Javascript中的setInterval()方法来打印在画布上绘制的钟针。

我想发生的事情是，手最初指向12。 setInterval()方法应该每3秒运行一次，并且用手旋转30度。这将导致手在1秒内被重新绘制为1，然后在3秒内被重新绘制为2，依此类推。

我试图在setInterval（）方法中编写函数，但是我对操作顺序感到困惑。

let canvas = window.document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");


function setup() {
  drawCircle();
  drawNumbers();
  setInterval(function() {
    ctx.translate(250, 250);
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -100);
    ctx.stroke();
    ctx.rotate(30 * Math.PI / 180)
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -100);
    ctx.stroke();
  }, 3000);
}

function drawCircle() {
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.arc(0, 0, 200, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.restore();
}

function drawNumbers() {
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.width / 2);
  for (let i = 12; i >= 1; i--) {
    ctx.strokeText(i, -5, -185);
    ctx.rotate(-30 * Math.PI / 180);
  }
  ctx.restore();
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Analogue Clock</title>
  <script src='script.js' defer></script>
</head>

<body onload="setup()">
  <canvas id="myCanvas" width="500" height="500" style="border: 1px solid black"></canvas>
</body>

</html>

Answer 1

问题是每次迭代for %%I in (notepad.exe) do echo %%~$PATH:I时，您总是旋转30度。

您实际需要做的是跟踪您正在使用的ctx.rotate(30 * Math.PI / 180)方法的哪个迭代（即被调用了多少次），以便您可以将其乘以所需的度数旋转。

换句话说，您总是旋转30度，但您想做的是旋转30倍。您已经执行的迭代次数。

Answer 2

从您的代码中，我可以看到您可以很好地计时...

您只是在手的移动/动画方面遇到了一些麻烦，缺少的一件事是在再次绘制之前先清除画布，否则您将获得多次相同的手绘，下面是一个动画您的代码版本。

现在，手没有按照您要求的频率移动，我留待您自己弄清楚。

let canvas = window.document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let increment = 0

function drawNumbers() {
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.width / 2);
  for (let i = 12; i >= 1; i--) {    
    ctx.strokeText(i, -5, canvas.width / 8 - canvas.width / 2);
    ctx.rotate(-30 * Math.PI / 180);
  }
  ctx.restore();
}

function drawTicks() {
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.width / 2);
  ctx.rotate(increment * Math.PI / 180)
  ctx.moveTo(0, 0);
  ctx.lineTo(0, canvas.width / 6 - canvas.width / 2);
  ctx.stroke();
  ctx.restore();
}

function draw() {
  increment++;
  ctx.clearRect(0, 0, canvas.width, canvas.width);
  ctx.beginPath();
  drawNumbers();
  drawTicks();
}

draw();
setInterval(draw, 100);

<canvas id="myCanvas" width="250" height="250" ></canvas>

如何通过使用setInterval方法调用函数来打印时钟指针

2 个答案: