0

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

所以我的想法是在像素发生变化时将它们绘制成 100x100 的图像块，然后渲染这些图像。

“块”中的像素以 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); 
                    }
                }   
            }                   
        }
    }

然而，它没有正确渲染：盒子有一些透明像素，这使得画布在应该有天空渐变时变得透明。

我想把图像写得如此透明，以显示那里的东西（天空渐变），而不是在画布上打洞

4

1 回答 1

1

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

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

这不仅会保留现有像素（如果更改则取决于复合模式），而且它也会比使用putImageData.

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

于 2013-09-23T18:44:02.057 回答