FlashとCanvasのどっちが早いか、四角を4000個描いて試してみた

FlashとCanvas+JavaScriptのどっちが描画が早いか、四角を16*16*16=4096個描くスクリプトを書いて試してみました。

→Flashで描く
→Canvas+JavaScriptで描く(ExplorerCanvasを設定済み。IEでも見れます。)

ちゃんとは計ってないけど、何回かリロードして試した限りでは、

FireFoxでは、Flashの方が若干早い。
IEだと、Flashのほうが圧倒的に早い。

といった感じでした。FireFoxのCanvasは思ったよりも高速。でも、やはり、ExplorerCanvasは重いようです。

実験に使ったプログラムのソース

実験に使ったプログラムのソースは以下の通り。

Flash

package {
    
    import flash.display.*;

    public class DrawRects extends Sprite  {

        public function DrawRects(){
            var graphics:Graphics = this.graphics;
            
            for(var r:Number = 0; r < 0xFF; r+=0x10 ) {
                for(var g:Number = 0; g < 0xFF; g+=0x10 ) {
                    for(var b:Number = 0; b < 0xFF; b+=0x10 ) {
                        var color:uint = r << 16 | g << 8 | b;
                        graphics.beginFill( color );
                        graphics.lineStyle( 0, color );
                        graphics.drawRect(r/4+(((b/0x10)%4)*0x40),g/4+(int(b/0x10/4)*0x40),4,4);
                    }
                }
            }
        }
    }
}

Canvas+JavaScript

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="excanvas.js"></script>
  <script type="text/javascript">
    function onLoad() {
        
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
    
        for(var r = 0; r < 0xFF; r+=0x10 ) {
            for(var g = 0; g < 0xFF; g+=0x10 ) {
                for(var b = 0; b < 0xFF; b+=0x10 ) {
                    var color = r << 16 | g << 8 | b;
                    ctx.fillStyle = "rgba(" + r + "," + g + "," + b +",1)"; 
                    ctx.fillRect(r/4+(((b/0x10)%4)*0x40),g/4+(Math.floor(b/0x10/4)*0x40),4,4);
                }
            }
        }
    }
  </script>
  
</head>
<body onload="onLoad();" >

  <canvas id="canvas" width="500" height="500" style="background-color:#FFFFFF;">
  </canvas>
  
</body>
</html>