Как перемещать объекты в canvas?

[Dimaz]

Помогите разобраться с перемещением квадрата. Чтобы он не растягивался, а перемещался.

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/

[Sweet]

.clearRect()

[Safort]

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]

однажды я задал подобный вопрос на этом форуме

А под каким ником?

[Safort]

Sweet, ответил в лс.

[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>

Так ведь если весь канвас очищать, надо будет все объекты заново рисовать. Это ж какая нагрузка будет) Химичил, химичил, вот что нахимичил:

function draw(){
ctx.fillStyle = "green";
ctx.fillRect(x,y,15,15);
ctx.clearRect(x-1,y,1,15);//очищаем
x++;
window.requestAnimationFrame(draw);
}

[ixth]

Ты не поверишь, но обычно все так и делается. Иногда делается несколько слоев-канвасов, если очень уж не хочется что-то перерисовывать. Не надо преждевременной оптимизации, добейся первых тормозов, а потом ищи узкие места, а то запутаешься там, где до готового результата будет как до Китая.

[Safort]

Dimaz,

Так ведь если весь канвас очищать, надо будет все объекты заново рисовать. Это ж какая нагрузка будет) Химичил, химичил, вот что нахимичил

Ну я же специально написал "нужно очищать канвас(или его часть)".
А вот допустим у тебя такая ситуация: на твоём холсте over 9000 всяких объектов и они постоянно куда-то движутся. Что тогда сделаешь?

Ну и как сказал товарищ выше - сначала добейся тормозов и только потом оптимизируй.

[Mips]

А вот здесь
http://threejs.org/examples/#canvas_geometry_hierarchy
или здесь
http://threejs.org/examples/#canvas_lines
тоже каждый раз полностью очищается канвас и каждый элемент рисуется заново?