0

カラフルな形をした大きな帆布（画面のほぼ全体を覆う）があります。カラーピッカーもあります。ユーザーがカラーピッカーを使用して色を選択するたびに、選択した色が事前に決定された色のセット（10色のセット）に属しているかどうかを確認します。選択した色が10色のいずれかである場合、キャンバスにはその色の図形のみを表示し、他の色で図形を非表示にします。コードの簡略化されたバージョンは次のとおりです。

//R,G,B : selected color
pixel = context.getImageData(0,0,W,H);                  
for(i=0; i<pixel.data.length; i+=4)
    if ((pixel.data[i]==R)&&(pixel.data[i+1]==G)&&(pixel.data[i+2]==B))
        pixel.data[i+3]=255;    
    else
        pixel.data[i+3]=0;

context.putImageData(pixel,0,0);

したがって、いつでもすべての色を表示するか、10色のうちの1つだけを表示します。コードは正常に機能します。問題はそれが非常に遅いということです。誰かが私がそれをより速くすることができる方法を知っていますか？前もって感謝します。

4

1 に答える 1

1

役立つかもしれないいくつかの最適化がありますが、全体的なアプローチはおそらく最適ではないと言わざるを得ません。元の画像がどのように生成されるかについてより多くの情報を得ることができれば、他のオプションがあるかもしれません.

  1. 値をキャッシュし.dataます - 各反復でそのプロパティを 5 回逆参照する必要はありません
  2. 配列の長さをキャッシュし.dataます。ループ中に変更されません
  3. ===の代わりに使用==して、キャストなしで正確な比較を許可します

それらの間で、運が良ければ、コードをおそらく 30% 高速化できます。

var pixel = context.getImageData(0, 0, W, H);
var data = pixel.data;
var i = 0, n = data.length;
while (i < n) {
    data[i + 3] = (data[i] === R && data[i + 1] === G && data[i + 2] === B) ? 255 : 0;
    i += 4;
}
context.putImageData(pixel, 0, 0);
于 2013-03-07T20:19:05.453 に答える