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
}

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

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

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

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

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

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

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

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

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

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

но я даже пытался присылать координаты каждые 17 секунд, этого должно было быть более чем достаточно, по моему пониманию(
я прочитал статью, но все же еще осталось недопонимание(
то есть фактически метод draw надо переделать как-то так?

var last=0;
function draw() {
    var progress = (new Date - last) 
    canvas.drawImage(image,myObject.x*progress,myObject.y*progress);
last = new Date;
}

Спасибо.

по моему так нужно
запоминаем старые координаты 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)
}

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

У тебя просто изменятся растояние сразу одним скачком а мы разбиваем путь на 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);
}

А разве такой метод для игры например подходит?
да у меня все в requestAnimationFrame, так что норм

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