clearRect не работает

Question

Я играю в понг на javascript, чтобы научиться создавать игры, и я хочу сделать его объектно-ориентированным.Все, что он делает, это рисует линию, которая растет дольше.Вот соответствующий код:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
        ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
        ctx.fillStyle = '#00ff00';
        ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    player.draw();
    ball.draw();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

Я пытался поместить часть ctx.clearRect в функции draw() и ball.draw(), и она не работает.Я также пробовал fillRect с белым, но он дает те же результаты.Как я могу это исправить?

Answer 1

Ваша реальная проблема в том, что вы не закрываете путь своего круга.

Добавьте ctx.beginPath() перед тем, как нарисовать круг.

jsFiddle .

Также несколько советов ...

• Ваши активы не должны отвечать за рисование (их метод draw()). Вместо этого, возможно, определите их визуальные свойства (это круг? Радиус?), И пусть ваша основная функция рендеринга обрабатывает canvas конкретный рисунок (это также имеет то преимущество, что вы можете переключать ваш рендерер на обычные элементы DOM или WebGL дальше по дорожке легко).
• Вместо setInterval() используйте requestAnimationFrame(). В настоящее время поддержка не так уж и велика, поэтому вы можете использовать ее с setInterval() или рекурсивным шаблоном setTimeout().
• Вашему clearRect() должны быть переданы размеры от элемента canvas (или они где-то определены). Включение их в функции рендеринга сродни магическим числам и может привести к проблемам с обслуживанием в дальнейшем.