Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   canvas animation (https://javascript.ru/forum/misc/32843-canvas-animation.html)

Simulator 31.10.2012 22:13

canvas animation
 
Приветствую!
Пытаюсь рисовать изображения в canvas, используя координаты полученные с сервера.
собственно отрисовка происходит как-то так:
function draw()
{
canvas.drawImage(image,myObject.x,myObject.y);
requestAnimationFrame(draw);
}

а координаты обновляются так:
function onmessage(data) {
    var packet = JSON.parse(data.data);
myObject.x = packet.x;
myObject.y= packet.y
}

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

nerv_ 31.10.2012 22:42

может дело в задержке ответа сервера?

Simulator 01.11.2012 08:41

лаги есть даже на локальной машине. и как тогда модифицировать алгоритм отрисовки, что бы их не было

melky 01.11.2012 09:13

Цитата:

Сообщение от Simulator
видимо я не правильно понимаю алгоритм отрисовки изображений по координатам, полученным с сервера.

нет, всё верно.

так и должно быть - координаты то вы не с течением времени изменяете, а сразу ставите конечные :D

Цитата:

Сообщение от Simulator
Может кто-нибудь подскажет, где у меня ошибка?)

в логике. когда приходят координаты, вы их сразу ставите

function onmessage(data) {
    var packet = JSON.parse(data.data);
myObject.x = packet.x;
myObject.y= packet.y
// и всё зашибись
}


нет, надо изменять эти координаты с течением времени.

в учебнике есть хорошая статья на эту тему
http://learn.javascript.ru/js-animation

ещё при анимации на канвасе нужно сначала очищать область, где был элемент - иначе он там и останется.
после этого изменять координаты, и только после этого отрисовывать текущее состояние.

Simulator 01.11.2012 17:47

Цитата:

Сообщение от melky (Сообщение 213421)
нет, всё верно.

так и должно быть - координаты то вы не с течением времени изменяете, а сразу ставите конечные :D

но я даже пытался присылать координаты каждые 17 секунд, этого должно было быть более чем достаточно, по моему пониманию(
Цитата:

Сообщение от melky (Сообщение 213421)
нет, надо изменять эти координаты с течением времени.

я прочитал статью, но все же еще осталось недопонимание(
то есть фактически метод draw надо переделать как-то так?
var last=0;
function draw() {
    var progress = (new Date - last) 
    canvas.drawImage(image,myObject.x*progress,myObject.y*progress);
last = new Date;
}


Спасибо.

vadim5june 01.11.2012 18:19

по моему так нужно
запоминаем старые координаты xold yold
получаем новые x y
то есть расстояние будет x-xold y-yold
и дальше плавно его проходим за сколько то итераций допустим 10
for(var i=0;i<10;i++)render(i);
function render(i){
ctx.clearRect(w,h);//очищаем canvas
ctx.drawImage(image,xold+(x-xold)/10*i,yold+(y-yold)/10*i)
}

Simulator 01.11.2012 18:25

Цитата:

Сообщение от vadim5june (Сообщение 213566)
по моему так нужно
запоминаем старые координаты xold yold
получаем новые x y
то есть расстояние будет x-xold y-yold
и дальше плавно его проходим за сколько то итераций допустим 10
for(var i=0;i<10;i++)render(i);
function render(i){
ctx.clearRect(w,h);//очищаем canvas
ctx.drawImage(image,xold+(x-xold)/10*i,yold+(y-yold)/10*i)
}

но ведь получается что координаты отрисовки не будут соответствовать реальным?

vadim5june 01.11.2012 18:29

Цитата:

Сообщение от Simulator (Сообщение 213568)
но ведь получается что координаты отрисовки не будут соответствовать реальным?

У тебя просто изменятся растояние сразу одним скачком а мы разбиваем путь на n частей и в конечной точке приходим к реальным координатам но плавно
а здесь гдето еще надо setTimeout вставить
var i=0
function render(){
ctx.clearRect(w,h);//очищаем canvas
ctx.drawImage(image,xold+(x-xold)/10*i,yold+(y-yold)/10*i);
i++;if(i<10)setTimeout(render,100);
}

Simulator 01.11.2012 18:47

А разве такой метод для игры например подходит?
Цитата:

Сообщение от vadim5june (Сообщение 213570)
а здесь гдето еще надо setTimeout вставить

да у меня все в requestAnimationFrame, так что норм

vadim5june 01.11.2012 18:52

Цитата:

Сообщение от Simulator
А разве такой метод для игры например подходит?

ну это просто метод для плавного движения-так сделана анимация в jquery типа fladeIn animate итд


Часовой пояс GMT +3, время: 00:38.