Question

我有一张每像素地形的地图。如果单独绘制这些像素，则需要很长的渲染时间。

所以我的想法是在更换像素时以100x100的图像块绘制它们，并渲染这些图像。

“chunk”中的像素以index = x + y * width的形式存储在1D数组中。

var img = game.c.createImageData(CHUNK_SIZE,CHUNK_SIZE);
for (var i=0;i<chunk.map.length;i++){
    var p = chunk.map[i];

    if (p){
        img.data[i*4] = 255;
        img.data[i*4+1] = 0;
        img.data[i*4+2] = 0;
        img.data[i*4+3] = 255;
    }else{
        img.data[i*4] = 0;
        img.data[i*4+1] = 0;
        img.data[i*4+2] = 0;
        img.data[i*4+3] = 0;
    }
}
this.render.push({x:chunk.x,y:chunk.y,img:img});

绘制：

for (var i=0;i<this.map.render.length;i++){
        var img = this.map.render[i];
        if (img.x*CHUNK_SIZE > this.player.x - (this.ce.width/2)){
            if (img.y*CHUNK_SIZE > this.player.y -(this.ce.height/2)){
                if ((img.x*CHUNK_SIZE)+CHUNK_SIZE < this.player.x + (this.ce.width/2)){
                    if ((img.y*CHUNK_SIZE)+CHUNK_SIZE < this.player.y + (this.ce.height/2)){
                        console.log("Rendering chunk...");
                        this.c.putImageData(img.img,(img.x*CHUNK_SIZE)-this.player.x,(img.y*CHUNK_SIZE)-this.player.y); 
                    }
                }   
            }                   
        }
    }

然而，它无法正确渲染：该框有一些透明像素，当应该有天空渐变时，它会使画布透明。

我想写这么透明的图像显示那里（天空渐变），而不是画布上的洞

Answer 1

当您使用putImageData时，您只是替换该区域的所有像素（包括Alpha通道），不会发生混音。

更好的方法是将您的块存储为屏幕外画布（或图像/精灵），并使用drawImage将它们绘制到主画布上。

这不仅可以保留现有像素（如果更改了，还取决于复合模式），但它也会比使用putImageData更快。

如果您仍然坚持使用putImageData，则需要首先对现有内容执行getImageData，然后遍历所有像素并将您的块中的像素与您从中获取的数据混合主画布根据他们的alpha值，最后将其结果放回画布上。这是一项非常昂贵的操作。

HTML5，在加载时渲染像素以获得更快的绘制时间

1 个答案: