Как напечатать стрелки часов, вызвав функцию с помощью метода setInterval - PullRequest
Новая
       20

Как напечатать стрелки часов, вызвав функцию с помощью метода setInterval

0 голосов
/ 24 марта 2019

Я пытаюсь напечатать стрелку часов, которые я нарисовал на холсте, используя метод setInterval() в Javascript.

Что я хочу сделать, так это то, что рука изначально указывает на 12. Метод setInterval() должен запускаться каждые 3 секунды и поворачиваться рукой на 30 градусов. Это приведет к тому, что рука будет перерисована, указывая на 1, после чего она будет перерисована, указывая на 2 через 3 секунды, и так далее, и так далее.

Я пытался написать функцию в методе 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>

Ответы [ 2 ]

0 голосов
/ 24 марта 2019

Из вашего кода я вижу, что вы можете просто нарисовать часы ...

У вас просто проблемы с движением / анимацией рук, вам не хватает одной вещи - очистить холст перед повторным рисованием, в противном случае вы получите одну и ту же руку несколько раз, ниже приведен анимированный версия вашего кода.

Теперь рука не движется с той частотой, которую вы просили, я оставляю это для вас, чтобы выяснить. 

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>
0 голосов
/ 24 марта 2019

Проблема в том, что вы всегда вращаетесь на 30 градусов, каждая итерация: ctx.rotate(30 * Math.PI / 180).

Что вам действительно нужно сделать, так это отслеживать, какую итерацию метода setInterval() вы используете (т.е. сколько раз он был вызван), чтобы вы могли умножить это на количество градусов, которые вы хотите повернуть ,

Другими словами, вы всегда вращаетесь на 30 градусов, но вы хотите сделать это повернуть на 30 градусов раз количество итераций ты уже казнил.

...