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

您应该已经预先计算了图片（正如其中一条评论所建议的那样），然后只读取这张图片中的位置。从中您可以对 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 ...

您应该事先决定什么颜色去哪里，并且只有 2 个循环而不是 3 个（可能这里最常见的决定是去一个 hsl 空间，省略 l 并在 h 和 s 上执行循环。

另一个重大改进是直接设置像素而不使用fillrect。符合以下条件的东西：

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

accesing pixels

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