Как я могу очистить предыдущую позицию круга на холсте? - PullRequest
Новая
       29

Как я могу очистить предыдущую позицию круга на холсте?

2 голосов
/ 27 апреля 2011

Я пытаюсь заставить Понг использовать canvas с JavaScript.

Прошло много лет с тех пор, как я создал любую игру, и поэтому я довольно новичок.

У меня проблема в том, чтоЯ пытаюсь переместить шар (пока только его позиция x) и пытаюсь удалить его предыдущую позицию.Код, который я использую, работал для весла (клавиши перемещения вверх и вниз для его перемещения).

Но, похоже, он не хочет работать с мячом.

Что я делаюнеправильно? 

this.draw = function() {
    ctx.clearRect(this.prevX - this.radius, this.prevY - this.radius, this.radius * 2, this.radius * 2);

    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fill();

    this.prevX = this.x;
    this.prevY = this.y;
 }

jsFiddle .

Я знаю, что использую clearRect(), но у меня сложилось впечатление, что он просто удаляет прямоугольную часть холста.

clearRect(x,y,width,height): очищает указанную область и делает ее полностью прозрачной

Источник .

Не стесняйтесь дать мнелюбые другие советы, так как я начинающий с этим.

Ответы [ 3 ]

4 голосов
/ 27 апреля 2011

Это на самом деле потому, что вы не звоните beginPath, поэтому каждый новый нарисованный круг также перерисовывает все старые круги!

Исправьте здесь с помощью иллюстрации:

http://jsfiddle.net/UvGVb/15/

Отмените звонок на beginPath, чтобы посмотреть, что происходило раньше.

0 голосов
/ 27 апреля 2011

Возможно, вы даете неправильные координаты функции 'clearrect' при отображении новой позиции шара.Некоторые из ваших ссылок на 'this' выглядят так, как будто они тоже могут быть хитрыми: 

var that = this;

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

Попробуйте распечатать координаты шара и координаты его предыдущего положения.Затем вы можете определить, очищаете ли вы правую область холста или нет.Я также проверил бы использование вами этого ключевого слова и удостоверился, что оно находится в нужной области действия для того, что вы хотите сделать.

У меня был только быстрый взгляд, так что извините, если я неправильно понял, чтоты пытаешься сделать.

0 голосов
/ 27 апреля 2011

Я не специалист по холсту, поэтому я пойду с просьбой «и другие советы».:-) Если вы отойдете от холста и вместо этого будете использовать HTML-элементы, такие как div, для рисования ваших ракеток и мяча, вам не придется беспокоиться об удалении, только о движении.Кроме того, есть много библиотек, которые помогут вам с позиционированием элементов, анимацией и т. Д., Из которых jQuery будет моим первым выбором.

...