Javascript!==没有给出与===的倒数相同的结果

Question

我已经将一个色轮图像加载到画布上,我在一个数组中有一个色调值列表.我遍历画布上的每个像素并删除匹配相同色调值的像素.

代码是:

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';
}