Как перемещать объекты в canvas?
Помогите разобраться с перемещением квадрата. Чтобы он не растягивался, а перемещался.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 10;
var y = 10;
function draw(){
ctx.fillStyle = "green";
ctx.fillRect(x,y,15,15);
x++;
window.requestAnimationFrame(draw);
}
draw();
http://jsfiddle.net/g0Lmfygu/ |
|
Dimaz,
нужно очищать канвас(или его часть) перед каждым перемещением объекта.
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 10;
var y = 10;
function draw(){
ctx.clearRect(0,0, 400, 400);
ctx.fillStyle = "green";
ctx.fillRect(x,y,15,15);
x++;
window.requestAnimationFrame(draw);
}
draw();
</script>
//однажды я задал подобный вопрос на этом форуме, а какой-то гнидос меня протроллил так и не ответив( |
Цитата:
|
Sweet, ответил в лс.
|
Цитата:
function draw(){
ctx.fillStyle = "green";
ctx.fillRect(x,y,15,15);
ctx.clearRect(x-1,y,1,15);//очищаем
x++;
window.requestAnimationFrame(draw);
}
|
Ты не поверишь, но обычно все так и делается. Иногда делается несколько слоев-канвасов, если очень уж не хочется что-то перерисовывать. Не надо преждевременной оптимизации, добейся первых тормозов, а потом ищи узкие места, а то запутаешься там, где до готового результата будет как до Китая.
|
Dimaz,
Цитата:
А вот допустим у тебя такая ситуация: на твоём холсте over 9000 всяких объектов и они постоянно куда-то движутся. Что тогда сделаешь? Ну и как сказал товарищ выше - сначала добейся тормозов и только потом оптимизируй. |
А вот здесь
http://threejs.org/examples/#canvas_geometry_hierarchy или здесь http://threejs.org/examples/#canvas_lines тоже каждый раз полностью очищается канвас и каждый элемент рисуется заново? |
| Часовой пояс GMT +3, время: 23:24. |