javascript - 背景 Canvas 与常规 Canvas 的性能

Question

不久前，webkit(以及 Safari)开始支持元素的 CSS Canvas 背景(来源:http://www.webkit.org/blog/176/css-canvas-drawing/)。

这可以大大简化游戏和多媒体的创建，因为您不需要将 Canvas 标签注入(inject) DIV(例如)，而只需直接挂接到 DIV 的背景即可。也许是这样的:

<div id="gameview"
style="background: -webkit-canvas(myscreen); width: 320px; height: 480px;">
</div>

<script>
    var target = document.getElementById("gameview");
    var wd = target.clientWidth;
    var hd = target.clientHeight;
    var context =  document.getCSSCanvasContext("2d", "myscreen", wd, hd);
    /* draw stuff here */
</script>

我想知道，这是否涉及任何速度惩罚？从理论上讲，我认为绘制到背景 Canvas 应该比绘制到 Canvas 标签更快，尤其是在目标元素为空的情况下。

有人测试过这个用于高速演示或游戏吗？

Answer 1

根据 my tests (也运行 in reversed order )，原始 canvas 元素略微但始终比背景 canvas 慢。

Chromium 17 绘制棋盘 10000 次:

• ~470 毫秒在背景 Canvas 上
• canvas 元素上约 520 毫秒

Safari 5 显示了类似的动态。

尝试将迭代次数设置为100000，结果应该与上面一致。

---

半年后更新

我们在一个项目中尝试了背景 Canvas 方法(作为一个小优化的尝试)，结果与我们的预期大相径庭。整个事情(两层:一层 - 带有背景 Canvas 的 div，另一层 - 普通 Canvas )变得稍微慢一些。事实上，当我们引入背景 Canvas 时，应用程序变得非常慢。在 Chrome 21 中测试。

我绝对不会保证背景 Canvas 在所有情况下都更快。