Question

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

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

因此，我可以随时显示所有颜色或仅显示十种颜色中的一种。代码工作正常。问题是它很慢。有谁知道如何让它更快？提前谢谢。

Answer 1

你可以做一些可能有所帮助的优化，但我不得不说你的整体方法可能不是最优的。如果我们可以获得有关如何生成原始图像的更多信息，则可能还有其他选项。

缓存.data值 - 在每次迭代中不需要取消引用该属性五次
缓存.data数组的长度，在循环期间不会更改
使用===代替==，以便在没有投射

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

如何使画布操作更快（HTML5 + JQuery）

1 个答案: