背景画布与普通画布的性能

Performance of background-canvas vs. regular canvas

本文关键字：性能 背景      更新时间：2023-09-26

一段时间后，webkit(以及Safari)开始支持CSS canvas-background元素(来源: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>

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

有人在高速演示或游戏中测试过这个吗?

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

铬17在一个棋盘上画了10000次:

  • ~ 470ms背景画布
  • ~ 520ms canvas元件

Safari 5显示了类似的动态。

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

半年后更新

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

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

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

Regular在我的测试中表现不如背景画布在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%
相关文章：