Question

我正在尝试制作一个颜色工具。所以我试图在画布中显示颜色。但问题是，它加载速度非常慢。我的代码是

  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.Both显示了相同的行为。请帮助我。提前谢谢。

Answer 1

首先，你的算法基本上是错误的。您正在计算3d空间中的颜色（i j k）并在2d空间（l，j）上对其进行maping。

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);

Answer 2

你应该已经预先计算了图片（正如其中一条评论所示），然后才能从这张图片中读取位置。从那里你可以用RGB反转工程颜色。

在html5画布中加载非常慢的所有颜色

2 个答案: