Перемещение элемента на холсте HTML

0

Я нарисовал прямоугольник на холсте, и я просто хочу, чтобы он перемещался каждые полсекунды. Я пытаюсь увеличить координату y каждые 0,5 секунды, но ничего не происходит.

Может ли кто-нибудь сказать мне, где я ошибаюсь?

JSFIDDLE

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);
Теги:
canvas

3 ответа

2
Лучший ответ

Вы переустанавливаете 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);
  • 0
    +1 потому что я забыл про clearRect в своем ответе: P
  • 0
    Кажется, что clearRect ничего не меняет?
Показать ещё 3 комментария
1

Переехать

var x = 100;
var y = 300;

Из функции внутри setInterval, чтобы они не сбрасывали каждый кадр.

0

При выполнении функции вы устанавливаете значения 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);

Смотрите эту скрипку.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню