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 итд

просто для игры,по идее,важно реальное текущее местоположение(

А что за игра?Почему координаты с сервера приходят и так редко через 17 секунд?

с сервера - пытаюсь создать что-то мультиплеерное.
простите, не 17 секунд, а 17 миллисекунд)
я разное время пытался устанавливать, а 17 миллисекунд должны обеспечивать обновление 1000\17 = 58 раз в секунду, то есть время, по идее, вполне достаточно для гладкой анимации

все поняли что 17 секунд поэтому и предлагали анимацию-а здесь она не нужна-тогда мой код тоже не нужен
если есть ссылка дайте посмотрю

мда, описка(
да, есть. Тут лаги видны очень хорошо, но присутсвуют они даже на локальной машине:
http://159.253.23.45:8080/test_1/

а смысл есть здесь канвас спользовать-можно все в DOM сделать-а там гораздо быстрее

всмысле в DOM?
+ это только пока одни танки, дальше можно будет еще чего-нибудь добавить. Не думаю, что тут без канваса обойтись можно, тем более что например: bombermine.ru ; browserquest.mozilla.com - вполне работают на canvas и нормально, я конечно далек от создания такого, очень далек)
но понять почему у меня лагает, а у них нет, хочется

да на bombermine.ru плавно движется все
хотел исходный код посмотреть но не получилось

да, хотя сложность понятное дело во много раз больше, так что мне кажется - у меня в логике апдейта координат все еще есть ошибка, вот только где? понять не могу
хм, в хроме все норм смотрится
view-source:http://bombermine.ru/play
но у меня там к сожалению очень слабо получается ориентироваться(

А с чего Вы взяли что они канвас используют-не видно что то
активно css используют библиотеки bootstrap и less

http://habrahabr.ru/post/143699/
http://habrahabr.ru/post/145505/
вот с этих топиков

так а разница?

больше так не делай :)

да, спасибо что разъяснили :thanks:

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