0

我有一个大画布（几乎覆盖了整个屏幕），其中包含五颜六色的形状。还有一个颜色选择器。每次用户使用颜色选择器选择颜色时，我都会检查所选颜色是否属于预先确定的一组颜色（一组十种颜色）。如果选择的颜色是十种颜色之一，我只在画布中显示该颜色的形状并隐藏其他颜色的形状。代码的简化版本如下：

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

所以任何时候我要么显示所有颜色，要么只显示十种颜色中的一种。代码工作正常。问题是它非常慢。有谁知道我怎样才能让它更快？提前致谢。

4

1 回答 1

1

您可以进行一些优化，这可能会有所帮助，但我不得不说您的整体方法可能不是最佳的。如果我们能获得更多关于如何生成原始图像的信息，可能还有其他选择。

  1. 缓存.data值 - 无需在每次迭代中取消对该属性的引用五次
  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 回答