Двойная буфферизация, socket io
Подскажите, есть ли какие-то варианты двойной буфферизации в канвасе? Моя идея была в том чтоб отрисовать на buffer_canvas все что мне требуется, и затем вывести это на основной, и все даже работает, но изображение все равно мигает время от времени.
//сервер
setInterval(function() {
for(var i in SOCKET_LIST){
var socket = SOCKET_LIST[i]
socket.emit('render_map', {
star_systems, planets})
}
}, 200)
//клиент
function draw(data){
if (render_mode === "map") {
for (i in data.star_systems) {
img.star = new Image();
img.star.src = '/img' + '/stars' + data.star_systems[i][2];
star_size = data.star_systems[i][5];
star_x = data.star_systems[i][3];
star_y = data.star_systems[i][4];
star_name = data.star_systems[i][1];
buffer_ctx.drawImage(img.star,star_x - star_size,star_y - star_size, star_size, star_size);
buffer_ctx.fillText(star_name, star_x - star_size,star_y+30 - star_size);
}
}
}
socket.on('render_map', function(data){
buffer_ctx.drawImage(img.space,0,0);
draw(data);
ctx.drawImage(buffer_canvas,0,0)
})
Ответы (1 шт):
Тут видимо дело не в буфферизации (ее можно потом отключить попробовать).
star.src = асинхронный. К моменту drawImage(img.star картинка еще не подгружена.
Проверьте, будет ли мигать с одной картинкой.
(Сам img объявлен не видно где; зачем он?)
Можно попробовать варианты:
- пересылать графику в самом начале
- досылать графику по самому сокету
- не рисовать элемент до подгрузки
Для отрисовки оптимален requestAnimationFrame.
Он происходит часто, и мог бы делать как-то так:
if(needRedraw){ redraw(); needRedraw=false }.
А прибытие новых данных и картинок -- сбрасывать needRedraw