Я нарисовал прямоугольник на холсте, и я просто хочу, чтобы он перемещался каждые полсекунды. Я пытаюсь увеличить координату y каждые 0,5 секунды, но ничего не происходит.
Может ли кто-нибудь сказать мне, где я ошибаюсь?
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
setInterval(function(){
var x = 100;
var y= 300;
var block = ctx.fillRect(x, y, 100, 120);
y++;
},500);
Вы переустанавливаете x и y для каждого вызова, чтобы они никогда не увеличивались. Кроме того, вам нужно очистить предыдущий рисованный прямоугольник, иначе они будут размыты.
Чтобы иметь возможность отменить цикл позже, вы можете рассмотреть возможность сохранения идентификатора таймера, возвращаемого из setInterval
чтобы вы могли вызвать clearInterval(id)
когда это необходимо (то есть при условии).
var x = 100;
var y = 300;
var tid;
tid = setInterval(function(){
ctx.clearRect(x - 2, y - 2, 104, 124); /// compensate for anti-aliasing
ctx.fillRect(x, y, 100, 120);
y++;
},500);
Условие может быть:
if (y > canvas.height) clearInterval(tid);
Переехать
var x = 100;
var y = 300;
Из функции внутри setInterval
, чтобы они не сбрасывали каждый кадр.
При выполнении функции вы устанавливаете значения x и y всегда по умолчанию. Вы должны передать их на аутсорсинг.
var canvas = document.createElement("canvas");
var c = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
var x = 100;
var y = 300;
setInterval(function(){
c.beginPath();
c.arc(x, y, 100, 120, Math.PI * 2, false);
c.fill();
x += 10;
},500);
Смотрите эту скрипку.
clearRect
в своем ответе: P