Question

我正在研究一种用优化方法绘制像素的方法，降低fps下降的概率。我使用2d，因为它比webgl上下文更容易。这是我尝试过的代码：

<script>
document.write(".")
document.body.innerHTML=""
document.body.style.margin="0 0 0 0"
c=document.createElement("canvas")
document.body.appendChild(c)
ctx=c.getContext("2d")
setInterval(function(){
c.width=innerWidth
c.height=innerHeight
for(x=0;x<innerWidth;x++){
for(y=0;y<innerHeight;y++){
ctx.fillStyle="rgba(0,0,0,1)"
ctx.fillRect(x,y,x+1,y+1)
}}},1)
</script>

但是当我将其保存为html文件并使用导航器打开html文件时，导航器会被捕获并需要超过2秒才能加载图像。

Answer 1

(() => { 
    document.write(".")
    document.body.innerHTML=""
    document.body.style.margin="0 0 0 0"
    c=document.createElement("canvas")
    document.body.appendChild(c)
    ctx=c.getContext("2d")
    c.width=innerWidth
    c.height=innerHeight
    x = 0;
    y = 0;

    function drawPixel() {

        ctx.fillStyle="rgba(0,0,0,1)";
        ctx.fillRect(x,y,x+1,y+1);
        x ++;
        if (x > innerWidth) {
            x = 0;
            y ++;
        }
        if (y < innerHeight)
            requestAnimationFrame(drawPixel);
    }

    requestAnimationFrame(drawPixel)
})()

试试这个，它几乎和你做的一样。 您需要更改某些部分才能获得更好的性能，我只是调整了您的代码以使用requestAnimationFrame。

Answer 2

一次绘制一个像素的最快方法是创建一个图像数据对象并添加一个类型化数组，将每个像素保存为32位整数。

// assuming the ctx has been defined
var pixelData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);    
pixelData.data32 = new Uint32Array(pixelData.data.buffer); // create 32bit pixel

填充缓冲像素数据的最快方法是通过typedArray.fill函数

 const white = 0xFFFFFFFF;
 pixelData.data32.fill(white);

或绿色

 const green = 0xFF00FF00;
 pixelData.data32.fill(green);

通过坐标设置像素

  function setPixel(x,y,color){
       pixelData.data32[x + y * ctx.canvas.width] = color; 
  }
  setPixel(10,10,0xFFFFFFFF);

要将像素移动到画布，请使用

 ctx.putImageData(pixelData,0,0);

32位像素的颜色通道的顺序为ABGR，0xFF000000为黑色0x00000000为透明，0xFFFF0000为蓝色，0xFF00FF00为绿色，{{ 1}}是红色的。（注意在一些非常罕见的情况下，可能会根据硬件的Endianness而改变）

我怎样才能制作优化的画布像素渲染？

2 个答案: