4

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

  1. drawImage()在for循环中使用手动重复图像<canvas>
  2. 使用 创建一个图案context.createPattern()，将<canvas>'sfillStyle设置为该图案，然后使用fillRect绘制一个包含整个图案的矩形<canvas>。

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

似乎这种drawImage()方式往往胜过这种createPattern()方式，尽管随着更新的浏览器的不同，这种差异减少了，并且似乎在最新的情况下消失了。

不过，我希望这createPattern()条路会更快。我假设createPattern()基本上会做与手动方法相同的事情drawImage()，但是内置，会做得更快。

任何想法为什么该createPattern()方法较慢？createPattern()除了在其应用的形状上重复绘制图案图像之外，还会做其他事情吗？我在编写测试时是否犯了一个错误？

4

2 回答 2

4

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

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

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 倍

于 2012-09-13T14:17:11.387 回答
0

试图在 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 创建新图像，我在此处发布的方法似乎更易于使用，尤其是如果我想更改图像，我可以轻松做到。

相信这会更有效率。如果有人知道怎么做，我很想听！

于 2013-02-17T19:50:56.787 回答