背景画布与普通画布的性能 [英] Performance of background-canvas vs. regular canvas

问题描述

后面的webkit（因此Safari）开始支持CSS画布背景的元素（资料来源： http://www.webkit.org/blog/176/css-canvas-drawing/ ）。

A while back webkit (and thus Safari) began to support CSS canvas-backgrounds for elements (Source: http://www.webkit.org/blog/176/css-canvas-drawing/).

这可以大大简化游戏的创作和多媒体，因为你不需要注入一个帆布标签到DIV（例如），但只是直接钩到DIV的背景。类似这样的东西：

This could greatly simplify the creation of games and multimedia, in that you dont need to inject a canvas-tag into a DIV (for instance), but simply hook into the background of the DIV directly. Something like this perhaps:

<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>

我想知道，有没有涉及速度的惩罚？在理论上，我认为绘制到一个背景画布应该比绘制到一个画布标记更快，特别是如果目标元素是空的。

I was wondering, are there any speed penalties involved in this? In theory i think drawing to a background canvas should be faster than drawing to a canvas tag, especially if the target element is empty.

有人测试这是为了高速演示或游戏？

Have anyone tested this for high-speed demos or games?

推荐答案

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

在我的测试中，在我的测试中，在linux debian中，常规看起来性能低于背景画布，heres使用的代码（也添加到 http://jsfiddle.net/hDPVr/ ）

Regular seems to underperform compared to background canvas in my tests on chrome in linux debian, heres the code used ( also added to 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％某些情况

So the only thing that I did for testing is fillRect, but it's still at least 10% better in some cases

这篇关于背景画布与普通画布的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！