HTML5 캔버스의 픽셀 설정 최적화

Question

HTML5 캔버스에는 명시 적으로 단일 픽셀을 설정하는 방법이 없습니다.

• 사용 getImageData 및 putImageData하지만 효율성으로 인해 rect 또는 같은 putImageData

• 사용 무거운 물체의 낮은 성능 애니메이션 너무 낮 :

  내가 지금까지 알고있는 솔루션입니다 putImageData 하나의 픽셀을 그릴 수 있지만 그릴 픽셀이 많이있을 때 성능이 훨씬 나빠진 것 같습니다.

나는 우리가 drawImage(new Image(w,h))에 의해 putImageData를 교체 할 경우 drawImage 기능은 정말 빨리 putImageData 보다 실제로는 것을 보았다, 정말 빠릅니다. 그러나 나는 픽셀 단위로 빠르게 설정 될 수있는 drawImage의 인수에 이미지를 넣는 해결책을 모른다.

그녀의 느린 코드의 예입니다

HTML :

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

자바 스크립트 :

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

사람이 성능을 향상시킬 수있는 단서가있는 경우

.

Answer 1

putImageData (html5 캔버스를 계획하는 경우) 무엇을 사용 하시겠습니까? 그것은 drawImage만큼 빠릅니다.

drawImage과 putImageData 방법 모두 유사한 이미지를 사용하여 다시 칠해도 결국 같은 속도가됩니다. 완전히 임의의 픽셀의 페인트 속도를 비교하고 계속해서 빈 페이지를 다시 그리는 것입니다. 이 증거가 필요하다면 예를들 수 있습니다.