优化HTML5画布中像素的设置

HTML5画布没有明确设置单个像素的方法。优化HTML5画布中像素的设置

我知道到目前为止，解决的办法是：

使用getImageData和putImageData但效率太低，动画由于putImageData
使用重物放像rect或低性能putImageData来绘制单个像素，但是当有很多像素绘制时性能似乎更差。

我已经看到了drawImage功能真的是快于putImageData 而事实上，如果我们通过drawImage(new Image(w,h))更换putImageData，它是真快。但是，我不知道任何解决方案把图像放在drawImage的参数上，它可以快速地逐个像素地设置。

她是缓慢的代码示例

HTML：

<canvas id="graph1" width="1900" height="1000"></canvas>

的Javascript：

var canvas=document.getElementById("graph1"), 
     ctx=canvas.getContext("2d"), 
     imageData, 
     data, 
     w=canvas.width, 
     loop=0, 
     t=Date.now(); 

    window.requestAnimFrame = (function(callback) { 
     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
     function(callback) { 
      window.setTimeout(callback, 1000/60); 
     }; 
     })(); 


    function animate() { 
     imageData=ctx.createImageData(w, canvas.height); 
     data=imageData.data; 
     for(i=0;i<30000;i++) { // Loop fast enough 
      x=Math.round(w*Math.random()); 
      y=Math.round(canvas.height*Math.random()); 
      data[((w * y) + x) * 4]=255; 
      data[((w * y) + x) * 4+1]=0; 
      data[((w * y) + x) * 4+2]=0; 
      data[((w * y) + x) * 4+3]=255; 
     } 
     ctx.putImageData(imageData, 0, 0); //Slow 
     //ctx.drawImage(new Image(canvas.width, canvas.height),0,0);// Would be about 4x faster even if ImageData would be also blank 

     requestAnimFrame(function() { 
       loop++; 
       if(loop<100) 
        animate(); 
       else 
        alert('finish:'+(Date.now()-t)); 
      }); 
    } 
    animate();

如果有人有线索，以提高性能。

来源

2013-01-24 Hentold

你尝试用fillRect（x，y，1,1）放置像素吗？ – GameAlchemist

自从我写下这条消息以来，浏览器可能已经发展了，但是在我测试使用rect对象的时候，它比任何解决方案都差得多。 – Hentold

putImageData是你想要使用的，（如果你打算在html5画布上）。它和drawImage一样快。

如果drawImage和putImageData方法具有相似的图像重绘，他们最终会达到相同的速度。您正在比较完全随机像素的重绘速度，反复重绘空白。如果你需要证明这一点，我可以举个例子。

来源

2013-01-24 23:58:08

我不确定。你可以看看http://jsperf.com/buffering。 'drawImage'比'putImageData'大约快100倍。并且在我的示例中，用行'ctx.drawImage（...）'替换'ctx.putImageData（...）'行，您将看到即使是空白图像，脚本也会更快（只需要4倍这个例子，但它会很好地提高动画的流畅度）。这确实很奇怪，因为浏览器针对'drawImage'进行了优化，而对'putImageData'进行了优化 – Hentold

http://jsfiddle.net/DEw3b/1/有趣的是，这与我的一台计算机相同，但不是另一个。无论如何，你不能用绘制单个像素。所以这是不重要的。 –

优化HTML5画布中像素的设置

回答

相关问题