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

Question

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

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 массива, один для звезд (объектов) x координата, один для y и один для переменной скорости. Цвет звезды меняет каждый кадр, чтобы он мерцал. Я подозревал, что проблема заключается в изменении цвета, и цвет объекта в скорости:

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.Обнаружение двойного буфера исправило бы мерцание.

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