HTML5，在加载时将像素渲染为图像，以加快绘制时间

HTML5, rendering pixels to image on load for faster draw times

本文关键字：图像 绘制 时间 加载 HTML5 像素      更新时间：2023-09-26

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

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

"块"中的像素存储在一维数组中，形式索引 = x+y*宽度。

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); 
                    }
                }   
            }                   
        }
    }

但是，它无法正确呈现：该框具有一些透明像素，当应该有天空渐变时，这使得画布透明。

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

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

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

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

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

相关文章：