javascript - Javascript!==给出的结果与===相反

Question

我已将色轮的图像加载到 Canvas 上，并且在数组中有一个色相值列表。我遍历 Canvas 上的每个像素，并删除匹配相同色相值的像素。

该代码是:

var element = document.getElementById("wheel-canvas");
var c = element.getContext("2d");   
var image = c.getImageData(0, 0, 375, 375);
var imageData = image.data;
paletteList = this.collection.pluck('hsv');
for (var i = 0, n = imageData.length; i < n; i += 4) {
    var hsv = this.model.convertRGBToHSV(imageData[i], imageData[i+1], imageData[i+2]);
    var hue = hsv[0];
    var sat = hsv[1];
    var val = hsv[2];
    $.each(paletteList, function(index, value) {
    if (hue === value[0])   
    {
        imageData[i] = '0';
        imageData[i+1] = '0';
        imageData[i+2] = '0';
    }
    });

}

   c.putImageData(image, 0, 0);

现在，我希望所有不符合色相的像素都变成黑色。我进行代码更改:

if (hue !== value[0])   

我得到以下结果:

为什么看起来不像第一个圆的倒数？

谢谢!

Answer 1

您确定将哪些像素设置为黑色的逻辑是错误的。

请注意，在each循环中，每个像素的色调将不等于调色板列表中的某些色调，因此所有像素都将设置为黑色。

您真正想对每个像素执行的操作是检测调色板列表中中的色相是否为。

var matched = false;
$.each(paletteList, function(index, value) {
 if (hue === value[0]) {
 matched = true; 
 return false;
 }
}
if (!matched) {
 imageData[i] = '0';
 imageData[i+1] = '0';
 imageData[i+2] = '0';
}