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标签完成双重（或三重？）缓冲区，但这是我要研究的第一件事。

HTML 5画布动画 - 对象闪烁

2 个答案: