1

私はカラーツールを作成しようとしています.だから私はキャンバスに色を表示しようとしました.しかし問題は、ロードが非常に遅いことです.ここに私のコードがあります

  var l=0

  var ctx = document.getElementById('color').getContext('2d');
  for (var i=0;i<125;i++){
    for (var j=0;j<124;j++){
        for(var k=0;k<125;k++){
      ctx.fillStyle = 'rgb(' +i*2+ ',' +j*2 + ','+k*2+')';
      l=i+k; 
      ctx.fillRect(l*1,j*1,1,1);
    }
    }   
  }

私はそれをFirefoxとCromeでテストしました。どちらも同じ動作を示しています。助けてください。よろしくお願いします。

4

2 に答える 2

0

（コメントの1つが示唆するように）画像を事前に計算してから、この画像から位置のみを読み取る必要があります。そこから、RGB で色をリバース エンジニアリングできます。

于 2013-03-04T14:37:34.220 に答える
0

まず第一に、あなたのアルゴリズムは基本的に間違っています。3D 空間 (ijk) で色を計算し、それを 2D 空間 (l, j) にマッピングしています。

l 変数のすべての値は数回計算され、最後の値のみが表示されます (i=0 k=100 -> l=100 ; 1=1 k=99 > l=100; i=2 k=98 > l= 100 ...

どの色をどこに配置するかを事前に決定し、ループを 3 つではなく 2 つだけにする必要があります (おそらく、ここでの最も一般的な決定は hsl 空間に移動し、l を省略して h と s でループを実行することです。

他の大きな改善点は、ピクセルを直接設定し、fillrect を使用しないことです。次の行の何か：

var imgData=ctx.createImageData (125,125);

accesing pixels

ctx.putImageData(imgData,0,0);
于 2013-03-04T14:29:37.327 に答える