如何提高 HTML 画布绘制像素的性能

Question

我正在 600x600 像素的 HTML 画布上绘制数据的可视化。每个像素需要大约 10 次加法/乘法，所以计算量很小，但不是很多。不幸的是，这需要大约半秒钟的时间来绘制。这意味着我的滑块（通常会影响每个像素）不会平滑地更新可视化效果。

是否可以通过以更有效的方式进行绘图来提高性能？我目前正在为每个像素调用以下内容：

ctx.fillStyle = computedPixelColor
ctx.fillRect(x, y, 1, 1)

我读到创建图像并修改像素，然后将该图像插入 HTML 会更慢。真的吗？这个过程有什么技巧吗？

Answer 1

莫尔效应示例，在 90 年代的演示中很流行。这个实现，直接ImageData 操作对我来说有 4-5 毫秒的帧时间（计算 600x600 像素，并用putImageData() 显示结果），虽然它是一个相对较新的 PC。当然，你的计算在做什么可能很重要，这个很简单。

var ctx=cnv.getContext("2d");
var data=ctx.createImageData(600,600);
var buf=new Uint32Array(data.data.buffer);

function draw(x1,y1,x2,y2){
  var i=0;
  for(var y=0;y<600;y++)
    for(var x=0;x<600;x++){
      var d1=(Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))/10) & 1;
      var d2=(Math.sqrt((x-x2)*(x-x2)+(y-y2)*(y-y2))/10) & 1;
      buf[i++]=d1==d2?0xFF000000:0xFFFFFFFF;
    }
  ctx.putImageData(data,0,0);
}

var cnt=0;
setInterval(function(){
  cnt++;
  var start=Date.now();
  draw(300+300*Math.sin(cnt*Math.PI/180),
       300+300*Math.cos(cnt*Math.PI/180),
       500+100*Math.sin(cnt*Math.PI/100),
       500+100*Math.cos(cnt*Math.PI/100));
  t.innerText="Frame time:"+(Date.now()-start)+"ms";
},20);

<div id="t"></div>
<canvas id="cnv" width="600" height="600"></canvas>

为了比较，每像素fillRect()s 的相同效果产生 205 毫秒的帧时间：

var ctx=cnv.getContext("2d");

function draw(x1,y1,x2,y2){
  //ctx.clearRect(0,0,600,600);
  //ctx.fillStyle="black";
  for(var y=0;y<600;y++)
    for(var x=0;x<600;x++){
      var d1=(Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))/10) & 1;
      var d2=(Math.sqrt((x-x2)*(x-x2)+(y-y2)*(y-y2))/10) & 1;
      //if(d1==d2)ctx.fillRect(x,y,1,1);
      ctx.fillStyle=d1==d2?"black":"white";
      ctx.fillRect(x,y,1,1);
    }
}

var cnt=0;
setInterval(function(){
  cnt++;
  var start=Date.now();
  draw(300+300*Math.sin(cnt*Math.PI/180),
       300+300*Math.cos(cnt*Math.PI/180),
       500+100*Math.sin(cnt*Math.PI/100),
       500+100*Math.cos(cnt*Math.PI/100));
  t.innerText="Frame time:"+(Date.now()-start)+"ms";
},20);

<div id="t"></div>
<canvas id="cnv" width="600" height="600"></canvas>

即使使用“优化”变体（仅使用全局clearRect() 和fillRect()-ing 黑色像素，请参阅注释部分），仍然需要每帧 60-70-80 毫秒（速度跳跃很多）。
所以无论你在做什么每像素的东西，真正阅读 Mozilla tutorial 关于 ImageData 已经在 cmets 中建议，使用直接缓冲区很重要。