HTML 5 анимация холста - объекты мигают

Question

Я изучаю способы манипулирования холстом HTML 5 и решил написать простую игру, скроллерную аркаду, для лучшего понимания. Он все еще находится в самом начале разработки и создает фон (движущееся звездное поле), я столкнулся с небольшой, но раздражающей проблемой - некоторые звезды мигают, двигаясь. Вот код, который я использовал:

var c = document.getElementById('canv'); 

var width = c.width; 
var height = c.height; 
var ctx = c.getContext('2d');//context 

var bgObjx = new Array; 
var bgObjy = new Array; 
var bgspeed = new Array; 

function init(){ 
    for (var i = 1; i < 50; i++){ 
     bgObjx.push(Math.floor(Math.random()*height)); 
     bgObjy.push(Math.floor(Math.random()*width)); 
     bgspeed.push(Math.floor(Math.random()*4)+1); 
    } 
    setInterval('draw_bg();',50); 
} 

function draw_bg(){ 
    var distance; //distace to star is displayed by color 

    ctx.fillStyle = "rgb(0,0,0)"; 
    ctx.fillRect(0,0,width,height); 

    for (var i = 0; i < bgObjx.length; i++){ 
     distance = Math.random() * 240; 
     if (distance < 100) distance = 100;//Don't let it be too dark 
     ctx.fillStyle = "rgb("+distance+","+distance+","+distance+")"; 
     ctx.fillRect(bgObjx[i], bgObjy[i],1,1); 
     bgObjx[i] -=bgspeed[i]; 
     if (bgObjx[i] < 0){//if star has passed the border of screen, redraw it as new 
      bgObjx[i] += width; 
      bgObjy[i] = Math.floor(Math.random() * height); 
      bgspeed[i] = Math.floor (Math.random() * 4) + 1; 
     } 
    } 
} 

Как вы можете видеть, есть 3 массивов, один для звезд (объектов) х координатных, один для у, и один для переменной скорости. Цвет звезды меняет каждый кадр, чтобы он мерцал. Я подозревал, что изменение цвета является проблемой, и переплетен цвет объекта к скорости:

for (var i = 0; i < bgObjx.length; i++){ 
    distance = bgspeed[i]*30; 

Собственно, что решить эту проблему, но я до сих пор не понимаю, как. Может, любой гуру графического рендеринга потрудился бы объяснить это, пожалуйста?

Заранее спасибо.

P.S. На всякий случай: да, я нарисовал некоторые решения из существующей игры Canvas, включая привязку цвета к скорости. Я просто хочу выяснить причину этого.

Answer 1

В этом случае «Мигание» звезд вызвано логической ошибкой при определении значения звезд distance (цвета).

distance = Math.random() * 240; // Это не гарантированно возвращать целое число

distance = (Math.random() * 240)>>0; // Это округляет результат до ближайшего целого числа

Двойная буферизация обычно не требуется для холста, так как браузеры не будут отображать нарисованный холст пока все функции рисования не будут выполнены.

Answer 2

Используется для просмотра аналогичного эффекта при программировании игр direct2d. Найденный двойной буфер фиксирует мерцание.

Не знаете, как бы вы сделали двойной (или тройной?) -буфер с тегом холста, но это первое, что я хотел бы изучить.