过滤数组中特定的数字范围

Question

我正在创建一个模糊画布（图像）边框的算法。在应用模糊效果之前，我创建的数组filtered包含所有需要模糊的像素值。

我创建了一个10×10px图像的例子。

function compute(w, h, bW) {
  w *= 4;
  var ignored = [];
  for (y = bW; y < (h - bW); y++) {
    for (x = 0; x < (w - (bW * 4 * 2)); x++) {
      ignored.push(w * y + x + bW * 4);
    }
  }
  console.log(ignored);

  function range(limit) {
    return Array.apply(null, Array(limit)).map(function(_, i) {
      return i;
    })
  }
  Array.prototype.diff = function(array) {
    return this.filter(function(elem) {
      return array.indexOf(elem) === -1;
    })
  }
  var filtered = range(w * h).diff(ignored);
  console.log(filtered);

  return filtered;
}

compute(10, 10, 2);

//////////////////////////////////////////////////////////////////
// Below is just to display the numbers that are being filtered //
//    Here, the size is 100 x 100 px with 10px border width     //
//////////////////////////////////////////////////////////////////

var pixels = compute(100, 100, 10);
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
var imgD = ctx.createImageData(100, 100);
for (var i = 0; i < imgD.data.length; i += 4) {
  if (pixels.indexOf(i) > 0) {
    imgD.data[i + 0] = 0;
    imgD.data[i + 1] = 0;
    imgD.data[i + 2] = 0;
    imgD.data[i + 3] = 255;
  } else {
    imgD.data[i + 0] = 255;
    imgD.data[i + 1] = 0;
    imgD.data[i + 2] = 0;
    imgD.data[i + 3] = 255;
  }
}
ctx.putImageData(imgD, 10, 10);

<canvas></canvas>

数组filtered包含具有背景颜色的所有数字，ignored包含具有背景颜色和的所有数字在图像中。

我的问题是：

如何更改代码，以便数组filtered的背景颜色为和，而不是？

---

高分辨率（65×65px）的示例：

---

Answer 1

FIDDLEJS ：http://jsfiddle.net/t14gr6pL/2/

说明：

取决于三角形的宽度（第二种颜色）。在64 * 64示例中，此宽度为7。

我们假设这个宽度（tw）是这样计算的（你可以改变）：

var tw = (2 * bW) - 1;

所以你的代码是：

function compute(w, h, bW) {
    var filtered = [];
    var WIDTH_MULTIPLICATOR = 4;

    var bH = bW;
    w *= WIDTH_MULTIPLICATOR;
    bW *= WIDTH_MULTIPLICATOR;

    var triangleWidth = (2 * bW) - 1;

    for (y = 0; y < h; y++) {
        for (x = 0; x < w; x++) {
            if (
                // Borders
                (Math.min(x, w - x) < bW) ||
                (Math.min(y, h - y) < bH) ||

                // Adding "Triangles"
                (Math.min(x, w - x) < bW + triangleWidth - Math.max(0, Math.min(y, h - y) - bH) * WIDTH_MULTIPLICATOR)

            ) {
                filtered.push(w * y + x);
            }
        }
    }

    return filtered;
}