画布纯绘制与 png 图像答案

【问题标题】：Canvas pure draw vs png image画布纯绘制与 png 图像
【发布时间】：2013-09-17 04:58:48
【问题描述】：

更快（复杂的图纸）。 fillRect 或重新打印 png 图像 drawImage。当重印 10000 个对象时。

ctx.fillStyle="#FF0000";//RED COLOR
ctx.fillRect(0,0,50,50);

ctx.drawImage(img,10,10);

【问题讨论】：

【解决方案1】：

drawImage 实际上更快。

我用 50x50 PNG 更新了测试用例：http://jsperf.com/canvas-draw-methods

在 Firefox 中它只是稍微快一点，但在 Chrome 中差别很大，drawImage 快了一个数量级。

（请注意，由于我使用的 PNG 尺寸不正确，因此之前的测试版本存在严重偏差。图像尺寸有很大的不同。）

【讨论】：

那是一个可怕的可怕测试用例。您正在比较绘制 50*50 的正方形和 432*505 的图像。当然，小的会更快。这里有一个更新：jsperf.com/canvas-draw-methods/2（结果是一样的，但是差值更低，更像是 40%）
如果您必须绘制复杂的东西，可能会错过 fillRect 的优势。
你说得对，那个测试用例太可怕了。我用适当大小的图像更新了它，drawImage 方法现在似乎快了很多。我已经相应地更新了我的答案。
我使用 fillrect 和 drawImage 循环 10,000 个复杂绘图进行新测试。 FillRect 需要 596.000 毫秒，而 drawImage 需要 29.000 毫秒。是一个真正的区别。