Question

在查看如何将重复的图像背景绘制到<canvas>上时（是的，我是<canvas>的新手），我看到有两种方法可以做到：

在drawImage()循环中使用for在<canvas>
使用context.createPattern()创建模式，将<canvas>的{{1}}设置为该模式，然后使用fillStyle绘制一个包含整个模式的矩形{ {1}}。

显然，我做的第一件事是创建一个JSPerf测试，看看哪个更快（“Premature Optimization™ - It Works”）：

http://jsperf.com/createpattern-vs-drawimage

似乎fillRect方式往往优于<canvas>方式，但最近浏览器的差异会减少，而且最近似乎消失了。

我希望drawImage()方式更快。我假设createPattern()基本上与手动createPattern()方法做同样的事情，但是内置，会更快。

为什么createPattern()方法较慢的想法？ drawImage()除了在应用的形状上重复绘制图案图像之外，还能做些什么吗？我在编写测试时是否犯了错误？

Answer 1

经过一些测试后我得到了相反的结果。

你进行性能测试的方式有点奇怪。我对其进行了规范化，并将javascript代码从设置移动到准备（应该在哪里）

http://jsperf.com/createpattern-vs-drawimage/2

填充图案似乎比chrome，IE，Firefox（略），移动chrome（galaxy nexus），iPad safari中的loopy drawImage更快。

此外，只需制作图案（使用带图案或其他方式的fillRect）并将其缓存到屏幕外画布上并从中绘制就应该快得多。两种方法都应该比使用循环多次调用drawImage更快。我将第三种方法添加为测试中的第三个片段。

更重要的是，图像或缓存模式的好处应该在图像重复次数越多时显着增加。见这里，例如：

http://jsperf.com/createpattern-vs-drawimage/3

绘制图像数百次导致createPattern比drawimage循环效率高100-200倍

Answer 2

我真的很沮丧试图让我的头围绕闭包并在Javascript中嵌套for循环 - 我对VB更有经验，并开始使用JS来制作有趣的小游戏。

无论如何长话短说，我不确定效率等级，但这对我来说很有意义：

function body_onload(){
var canvas = document.getElementById('canvas-id');
var context = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var image = new Image();    
function drawBackground(){
    context.fillStyle=context.createPattern(image, "repeat");;
    context.fillRect(0,0,width,height);
    }
image.src="grass.jpg";
image.onload = drawBackground;

}

第一次为我工作。甚至尝试引用实际的<img>而不是仅使用JS创建新图像，我在这里发布的方法似乎更容易使用，特别是如果我想要更改图像，我可以轻松地做到这一点。

我相信这可能更有效率。如果有人知道如何，我很乐意听到！

为什么drawImage（）在许多浏览器中比createPattern（）稍微/明显地执行？

2 个答案: