background-canvas与普通画布的性能

Question

前段时间webkit(以及Safari)开始支持元素的CSS画布背景(来源: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

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%