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

Контейнеры Python содержат ссылки на другие объекты. См. Этот пример:

>>> a = []
>>> b = [a]
>>> b
[[]]
>>> a.append(1)
>>> b
[[1]]

В этом b есть список, содержащий один элемент, который является ссылкой на список a. Список a изменен.

Умножение списка на целое эквивалентно добавлению списка к себе несколько раз (см. операции общей последовательности ). Итак, продолжаем с примера:

>>> c = b + b
>>> c
[[1], [1]]
>>>
>>> a[0] = 2
>>> c
[[2], [2]]

Мы видим, что список c теперь содержит две ссылки на список a, который эквивалентен c = b * 2.

Python FAQ также содержит объяснение этого поведения: Как создать многомерный список?

0
задан Helder Sepulveda 24 March 2019 в 15:01
поделиться

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>

0
ответ дан Helder Sepulveda 24 March 2019 в 15:01
поделиться

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

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

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

0
ответ дан jwir3 24 March 2019 в 15:01
поделиться
Другие вопросы по тегам:

Похожие вопросы: