我正在 600x600 像素 HTML Canvas 上绘制数据可视化。每个像素大约需要 10 次加法/乘法,因此计算量很小,但不是很多。不幸的是,这需要大约半秒的时间来绘制。这意味着我的 slider (通常会影响每个像素)不会顺利更新可视化。
是否可以通过更有效的方式进行绘图来提高性能?我目前正在为每个像素调用以下内容:
ctx.fillStyle = computedPixelColor
ctx.fillRect(x, y, 1, 1)
我读到创建图像并修改像素,然后在 HTML 中插入该图像的速度较慢。真的吗?这个过程有黑客攻击吗?
最佳答案
莫尔效应示例,在 90 年代的演示中很流行。这个实现,直接用ImageData
尽管它是一台相对较新的 PC,但对我来说,操作的帧时间为 4-5 毫秒(计算 600x600 像素,并使用 putImageData()
显示结果)。当然,你的计算在做什么可能很重要,这个很简单。
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()
的相同效果会产生 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()
- 仅黑色像素,请参阅注释部分),每帧仍然需要 60-70-80 毫秒(速度跳跃很多)。
因此,无论您在做什么每像素的事情,请认真阅读 Mozilla tutorial关于 ImageData
正如评论中所建议的,使用直接缓冲区非常重要。
关于javascript - 如何提高 HTML Canvas 绘制像素的性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58482163/