HTML5キャンバスでデザインする - レンダリングを高速化する方法

Question

私はHTML5キャンバス上でデザインをレンダリングするのがかなり速いという印象を受けました。私は次のコードを使用していると私はレンダリングに1秒未満かかるだろうと思うだろうが、約2分を取る。

コード：

<script> 
var canvas = document.getElementById("canvas") 
    ctx = canvas.getContext('2d') 
    maxW = window.innerWidth 
    maxH = window.innerHeight 
    x = -1 
    numLeft = 15 

//maxW = 300 
//maxH = 300 
canvas.setAttribute("width", maxW) 
canvas.setAttribute("height", maxH) 
ctx.fillStyle = "rgba(0,0,0,.5)" 

for(var j = 0; j < maxH; j++){ 
    for(var i = 0; i < maxW; i++){ 
    if(numLeft < 0){ 
     if(x == -1){ 
     ctx.fillStyle = "rgba(127,127,127,.5)" 
     //numLeft += 12 
     numLeft += 5 
     } 
     else{ 
     ctx.fillStyle = "rgba(0,0,0,.5)" 
     //numLeft += 24 
     numLeft += 15 
     } 
     x *= -1 
    } 
    ctx.fillRect(i,j,i+1,j+1) 
    numLeft-- 
    } 
    //numLeft -= 5 this one's crazy :D 
    numLeft -= 3 
} 

黒とグレーのに斜めのストライプを描くことになっています。しかし、もう一度、レンダリングするのが永遠になり、ほとんどの人のブラウザがクラッシュするでしょう。どのようにこれをスピードアップするためのヒント？

Answer 1

私が知る限り、コメントは回答として受け入れることができないので、答えとして@pimvdbのコメントを投稿しています。問題は、fillRect()が呼び出されていたということでした。実際にはすべてのパラメータが座標の場合には、の場合は呼び出されていました。

これは、this jsFiddleのコードで大きなパフォーマンス上の問題であることが確認されました。

前述のように、プレレンダリングやライングラデーションのような他のパフォーマンスの改善がありますが、これは即時のパフォーマンス上の問題に対処しています。私のChromeのテストでは、パフォーマンスは6秒から1秒に短縮されました。

performance suggests on html5rocks.comを試しましたか？

Answer 2

ピクセルベースの操作は、各ピクセルを通過して色付けする必要があるため、ほとんど常に高価です（1000x1000サイズ→1 000 000、100万ピクセル!!!）。デザインがどのように見えるかを知っているときは、常にパフォーマンスを最適化する方法を見つける必要があります。キャンバスに幅の広いストライプの色を塗りつぶして、変更する必要のあるピクセルだけをループすることで、例を改善することができます（maxHとmaxWはキャンバスのサイズで、内側のウィンドウではないことを確認してください）。

実際には、moveToとlineToコマンドを使用して線を描画する方がはるかに簡単で高速な方法です。