画布：逐像素绘制图像和requestAnimationFrame时序

Question

For learning purpose, I am writing some code to draw an image randomly pixel by pixel in a canvas. Here's the link for the following codes.

I want the animation to be finished within 1 sec. However, as you can see from the console, it takes about 7 sec. I try smaller image, the number is closing to 1 sec.

So in this case, the timing of requestAnimationFrame is not reliable. I want to know the cause. Is it because putImageData looking for one of the pixels in its data array takes too much time? Or is it because something else. I think to know when requestAnimationFrame's timing is not reliable is critical to make good animations.

Moreover, is there any better way to do what I want to do?

// At first, I get the image's data, then I build an array whose 
// length is equal to the number of pixels of the image, each element 
// of the array represents one of the image's pixel. Then I shuffle
// this array and pop a certain number of elements for 
// `ctx.putImageData` to draw the corresponding pixel per frame.

var ctx = c.getContext("2d"),
    img = new Image();
img.onload = init;
img.src = "download.png"; //placehold.it's 300x200 image

function formArr(w,h){ //Build image pixel outputting sequence array based on image's width and height
  var arr = [];
  for (i=0;i<w*h;i++){
    arr.push(i);
  }
  return arr;
}

function Point(i,w){ //locate pixel's X and Y base on image width
  this.x = i%w;
  this.y = Math.floor(i/w);
}

function shuffleRect(arr){  //shuffle the output sequence array
   ....
}

function init(){
  var w = ctx.canvas.width = img.width*2;
  var h = ctx.canvas.height = img.height*2;
  //form Image Data
  ctx.drawImage(img,0,0,w,h);
  var imageData = ctx.getImageData(0,0,w,h);
  ctx.clearRect(0,0,w,h);

  //build output sequence
  var sequence = formArr(w,h);
  shuffleRect(sequence);

  var sec = 1; //animation duration 
  var t1 = Date.now();
  function animate(){
    var pointsPerFrame = Math.floor(w*h/sec/60)+1;
    for (i=0;i<Math.min(pointsPerFrame,sequence.length);i++){
      var j = sequence.pop();
      ctx.putImageData(imageData,0,0,new Point(j,w).x,new Point(j,w).y,1,1); //draw points for next frame

    }
    if(sequence.length){requestAnimationFrame(animate)}else{
      var t2 = Date.now();
      console.log(t2-t1);

    }
  }
  animate();
}

Answer 1

Using the clipping version of drawImage will be faster than putImageData

// directly copy from image to canvas 1 pixel at a time
context.drawImage(image,x,y,1,1,x,y,1,1);

But using compositing might be faster than putImageData & drawImage...

First create a second canvas in memory the size of the image.

Then in each animation loop:

• Fill the required number of new random pixels on the second canvas: memoryContext.beginPath + memoryContext.rect(x,y,1,1) each new pixel + memoryContext.fill() .
• Clear the main canvas.
• Draw the secondary canvas onto the main canvas: drawImage(memoryCanvas,0,0)
• Set compositing to source-atop on the main canvas.
• drawImage the image onto the main canvas. Compositing will cause the image to appear only where the filled pixels exist.
• Set compositing back to source-over on the main canvas.

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var canvas2=document.createElement("canvas"); var ctx2=canvas2.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var newPixelCount; var accumPixelCount=0; var totPixels; var img=new Image(); img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg"; function start(){ cw=canvas.width=canvas2.width=img.width; ch=canvas.height=canvas2.height=img.height; newPixelCount=cw*ch/60; totPixels=cw*ch; t1=performance.now(); requestAnimationFrame(animate); } function animate(){ ctx2.beginPath(); for(var i=0;i<newPixelCount;i++){ accumPixelCount++; if(accumPixelCount<totPixels){ var y=parseInt(accumPixelCount/cw); var x=accumPixelCount-y*cw; ctx2.rect(x,y,1,1); } } ctx2.fill(); ctx.clearRect(0,0,cw,ch); ctx.drawImage(canvas2,0,0); ctx.globalCompositeOperation='source-atop'; ctx.drawImage(img,0,0); ctx.globalCompositeOperation='source-over'; // if(accumPixelCount<totPixels){ requestAnimationFrame(animate); }else{ alert('Complete: '+parseInt(performance.now()-t1)+'ms'); } } function animateDrawImage(){ ctx2.beginPath(); for(var i=0;i<newPixelCount;i++){ accumPixelCount++; if(accumPixelCount<totPixels){ var y=parseInt(accumPixelCount/cw); var x=accumPixelCount-y*cw; ctx.drawImage(img,x,y,1,1,x,y,1,1); } } // if(accumPixelCount<totPixels){ requestAnimationFrame(animate); }else{ alert('Complete: '+parseInt(performance.now()-t1)+'ms'); } } 

 <canvas id="canvas" width=300 height=300></canvas>