背景画布与常规画布的性能

Question

不久前，webkit（以及 Safari）开始支持元素的 CSS canvas-backgrounds（来源：http://www.webkit.org/blog/176/css-canvas-drawing/）。

这可以极大地简化游戏和多媒体的创建，因为您不需要将画布标签注入 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>

我想知道，这是否涉及任何速度处罚？理论上，我认为绘制到背景画布应该比绘制到画布标签更快，特别是如果目标元素为空。

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

Answer 1

根据我的测试（也运行以相反的顺序），原始 canvas 元素比背景 canvas 稍稍慢，但始终慢。

Chromium 17 绘制棋盘 10000 次：

• 在背景画布上约 470 毫秒
• 在 canvas 元素上约 520 毫秒

Safari 5 显示类似动力学。

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

---

半年后更新

我们在一个项目中尝试了背景画布的方式（作为小幅优化的尝试），结果与我们的预期截然相反。整个事情（两层：一层 - 带有背景画布的 div，另一层 - 常规画布）变得稍微变慢。事实上，当我们引入背景画布时，应用程序变得非常慢。在 Chrome 21 中进行了测试。

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

Answer 2

test.php:11Regular Canvas 606
test.php:20Background Canvas 449
test.php:11Regular Canvas 516
test.php:20Background Canvas 483

在我在 Linux debian 中对 chrome 进行的测试中，与背景画布相比，常规似乎表现不佳，这是使用的代码（也添加到 http:// /jsfiddle.net/hDPVr/ ）

<div style="width:300; height:200; background: -webkit-canvas(test_canvas); "></div>
<canvas id="canvas" style="width:300; height:200;"></div>

<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var regular_timer = new Date().getTime() ;
    for( var i = 0; i<100000; i++ ){
    context.fillRect( 0,0,10,10);
    }
    console.log( 'Regular Canvas', regular_timer - (new Date().getTime()) )



    var context = document.getCSSCanvasContext('2d', 'test_canvas', 300, 200); 
    var background_timer = new Date().getTime() ;
    for( var i = 0; i<100000; i++ ){
    context.fillRect( 0,0,10,10);
    }
    console.log( 'Background Canvas', background_timer - (new Date().getTime()) )

</script>

所以我为测试所做的唯一事情是 fillRect，但在某些情况下它仍然至少好 10%