Анимация объекта на canvas

[levshkatov]

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

arc(x, y, 15, 0, 2*Math.PI, true);

[tsigel]

levshkatov,
clearRect или canvas.width = canvas.width

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

[levshkatov]

Способ с шириной холста не подходит, нет необходимости очищать весь холст.
Насчет clearRect интересно, но как его лучше использовать? Если сначала очищать а потом поверх рисовать, анимация будет рывками.
Спрашиваю, чтобы знать, как это правильно делается.

[tsigel]

levshkatov,
Правильно стирать, а потом рисовать. Если будете быстро стирать и рисовать - рывков не увидите.

[tsigel]

<canvas width="1000" height="500" style="position: absolute;"></canvas>

<script>

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var x = 20;
    ctx.strokeStyle="red";
    ctx.beginPath();
    ctx.arc(x, 250, 15, 0, 2*Math.PI, true);
    ctx.closePath();
    ctx.stroke();

    var animate = function () {

        ctx.clearRect(0,0, 1000, 500);
        x+= 5;
        ctx.beginPath();
        ctx.arc(x, 250, 15, 0, 2*Math.PI, true);
        ctx.closePath();
        ctx.stroke();
        if (x < 1000) {
            requestAnimationFrame(animate);
        }

    };

    setTimeout(animate , 2000);


</script>

[tsigel]

levshkatov,
Если перерисовывать получается слишком накладно - иногда делают 2 канваса и на одном рисуют статику, а на другом - все подвижное.

[levshkatov]

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

[tsigel]

levshkatov,
Оптимизировать надо тогда, когда заметно что производительности не хватает. Попробуйте сначала чистить все, и если будет тормозить, то тогда можно вынести объект зависящий от мышки в отдельный канвас например. Я обычно чищу все поле. С канвасом есть много интересных решений. Например если сделать его маленьким а потом растянуть, то работать он будет сильно быстрее (но потери качества).

Я делал мобильную игру, где надо было тапать по падающим сверху продуктам. Все кроме фона рисовал на канвасе. бывало до 30 объектов на экране одновременно. Канвас размером в экран телефона чистился целиком на мобилах без тормозов.

[levshkatov]

tsigel,
Спасибо большое за ответ. Делаю тоже игрушку, в перспективе возможно и на телефоны. Пока что попробую с компьютерной версией разобраться.
Там и получается, что раз объект игрока движется, вокруг все меняется.
А с фоном как лучше поступить? Я себе его представляю как довольно обширное рисованное поле, наверное экранов в 6 по длине и ширине, то есть, чтобы создавалась иллюзия движения (игрок двигается не только в пределах экрана).

Насчет того, что лучше использовать для очистки канваса нашел такой вот сервис: http://jsperf.com/ctx-clearrect-vs-c...canvas-width/2
Попробую постоянно добавлять прямоугольники по размеру канваса. Надеюсь, они не сильно впоследствии нагружают память?