可以改善此canvas drawImage（）测试的性能吗？

Question

我有一个非常简单的循环，可以在画布中以平铺方式多次绘制8px x 8px的图像。 目前，每个循环绘制7500张图像。

参见jsfiddle。

var img = new Image();
img.src = 'http://i.imgur.com/3dzaMlv.png';

var W = 8;
var H = 8;
var R = 800/W;
var C = 600/H

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var fps = document.getElementById('fps');
var timePrev = new Date().getTime();
var fpsInterval = 30;
var i = 0;

window.setInterval(function() {

    ctx.clearRect(0, 0, 800, 600);

    for (var r=0 ; r<R ; r++) {
        for (var c=0 ; c<C ; c++) {
            ctx.drawImage(img, r*W, c*H);
        }
    }

    // fps
    if (i % fpsInterval == 0) {
        var timeNow = new Date().getTime();
        var spf = (timeNow - timePrev) / fpsInterval / 1000;
        fps.innerHTML = (1/spf).toFixed(2);
        timePrev = timeNow;
    }
    i++;

}, 1000/60);

在我的I7-2700K（3.5GHz）处理器和ATI Radeon HD7970上，我得到以下帧率：

• 镀铬36.0.1985.143 m：〜40 FPS
• Firefox 30.0： 约55 FPS
• IE 11.0.9600.17239：~35 FPS

假设我确实确实需要在每次更新时绘制这么多的图块，是否有任何方法可以提高FPS性能？

编辑：为澄清起见，我要求在每次更新时将它们绘制为单独的图块。 因此，将它们全部渲染到屏幕外的画布上将不起作用。 我对表现良好的drawImage（）调用感到失望。

Answer 1

使用requestAnimationFrame代替setInterval ，请参见http://www.w3.org/TR/animation-timing/ 。 您的代码可能是这样重写的： http : //jsfiddle.net/fv99o6jc/

Answer 2

这是使用少得多的drawImage的一种方法：

// make a template column
for(var y=0;y<ch;y+=ih){
    ctx.drawImage(img,0,y);
}

// flood-fill with the template column
for(var x=iw;x<cw;x+=iw){
    ctx.drawImage(canvas,0,0,iw,ch,x,0,iw,ch);
}

演示：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var img=new Image(); img.onload=start; img.src="http://i.imgur.com/3dzaMlv.png"; function start(){ var iw=img.width; var ih=img.height; // make a template column for(var y=0;y<ch;y+=ih){ ctx.drawImage(img,0,y); } // flood-fill with the template column for(var x=iw;x<cw;x+=iw){ ctx.drawImage(canvas,0,0,iw,ch,x,0,iw,ch); } } 

 body{ background-color: ivory; padding:10px; } #canvas{border:1px solid red;} 

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