Анимация объекта на canvas
Пытаюсь двигать кружочком, привязанным к координатам мыши.
Использую requestAnimationFrame. Кружок двигается за мышкой, но предыдущие круги остаются. Вопрос в том, как их убрать? Может метод рисования используется другой? Я использовал arc(x, y, 15, 0, 2*Math.PI, true); |
levshkatov,
clearRect или canvas.width = canvas.width Канвас это холст. Все что на нем отрисовали - остается. Стереть можно либо специальным методом, либо тронув размер холста (на старых андройдах метод глючит и рекомендуется дергать размер, но это медленно.) |
Способ с шириной холста не подходит, нет необходимости очищать весь холст.
Насчет clearRect интересно, но как его лучше использовать? Если сначала очищать а потом поверх рисовать, анимация будет рывками. Спрашиваю, чтобы знать, как это правильно делается. |
levshkatov,
Правильно стирать, а потом рисовать. Если будете быстро стирать и рисовать - рывков не увидите. |
<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>
|
levshkatov,
Если перерисовывать получается слишком накладно - иногда делают 2 канваса и на одном рисуют статику, а на другом - все подвижное. |
Дело в том, что перерисовываемых элементов на канвасе довольно много. В каждый момент времени у каждого из них свои координаты (только один объект зависит от координат мыши, остальные - нет). Как думаете, стоит полностью очищать канвас в таком случае или прямоугольниками подчищать за каждым объектом?
|
levshkatov,
Оптимизировать надо тогда, когда заметно что производительности не хватает. Попробуйте сначала чистить все, и если будет тормозить, то тогда можно вынести объект зависящий от мышки в отдельный канвас например. Я обычно чищу все поле. С канвасом есть много интересных решений. Например если сделать его маленьким а потом растянуть, то работать он будет сильно быстрее (но потери качества). Я делал мобильную игру, где надо было тапать по падающим сверху продуктам. Все кроме фона рисовал на канвасе. бывало до 30 объектов на экране одновременно. Канвас размером в экран телефона чистился целиком на мобилах без тормозов. |
tsigel,
Спасибо большое за ответ. Делаю тоже игрушку, в перспективе возможно и на телефоны. Пока что попробую с компьютерной версией разобраться. Там и получается, что раз объект игрока движется, вокруг все меняется. А с фоном как лучше поступить? Я себе его представляю как довольно обширное рисованное поле, наверное экранов в 6 по длине и ширине, то есть, чтобы создавалась иллюзия движения (игрок двигается не только в пределах экрана). Насчет того, что лучше использовать для очистки канваса нашел такой вот сервис: http://jsperf.com/ctx-clearrect-vs-c...canvas-width/2 Попробую постоянно добавлять прямоугольники по размеру канваса. Надеюсь, они не сильно впоследствии нагружают память? |
| Часовой пояс GMT +3, время: 16:22. |