为了学习,我正在编写一些代码,在画布上逐像素随机绘制图像。这是以下代码的链接。
我希望动画在1秒内完成。然而,正如你从控制台上看到的,它大约需要7秒。我尝试较小的图像,这个数字接近1秒。
因此,在这种情况下,requestAnimationFrame的定时是不可靠的。我想知道原因。是因为putImageData
在其数据阵列中查找其中一个像素花费了太多时间吗?还是因为别的原因。我认为知道requestAnimationFrame的时间不可靠对于制作好动画至关重要。
此外,还有什么更好的方法可以做我想做的事吗?
// 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();
}
使用drawImage
的剪裁版本将比putImageData更快
// directly copy from image to canvas 1 pixel at a time
context.drawImage(image,x,y,1,1,x,y,1,1);
但是使用合成可能比putImageData&drawImage
首先在内存中创建与图像大小相同的第二个画布。
然后在每个动画循环中:
- 在第二个画布上填充所需数量的新随机像素:
memoryContext.beginPath
+memoryContext.rect(x,y,1,1)
每个新像素+memoryContext.fill()
- 清除主画布
- 在主画布上绘制辅助画布:
drawImage(memoryCanvas,0,0)
- 在主画布上将合成设置为
source-atop
drawImage
将图像放到主画布上。合成将导致图像仅显示在填充像素所在的位置- 在主画布上将合成设置回
source-over
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>