p5js如何获取单个像素颜色 颜色匹配if语句不生效问题求助

JavaScript中数组为引用类型，==/===运算符仅对比数组的内存引用地址，不会校验数组内部的元素值。你代码中get()返回的RGBA数组和[0, 0, 255, 255]是两个独立的数组对象，即使内容完全一致，对比结果也永远为false，所以if分支始终不会执行。

以下三种方案均可解决问题：

• 方案1：逐通道对比（性能最优）
  直接对RGBA四个通道的数值分别判断，不需要额外转换开销：

gravity(){
  if (this.y <= 400 - this.scale){
    let gc = get(this.x, this.y + 25);
    print(gc);
    // 逐通道判断颜色是否为纯蓝不透明
    if (gc[0] === 0 && gc[1] === 0 && gc[2] === 255 && gc[3] === 255){
      this.canGravity = false;
    } else {
      this.canGravity = true;
    }
    if (this.canGravity == true){
      this.y += 2;
    }
  }
}

• 方案2：转字符串对比（写法最简洁）
  将两个数组转为JSON字符串后再对比内容：

if (JSON.stringify(gc) === JSON.stringify([0, 0, 255, 255])){
  this.canGravity = false;
}

• 方案3：封装通用数组对比函数（适合多场景复用）
  如果项目中频繁需要对比数组内容，可单独封装工具函数：

// 公共工具函数
function isArrayEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) return false;
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) return false;
  }
  return true;
}

// 业务代码中调用
if (isArrayEqual(gc, [0, 0, 255, 255])){
  this.canGravity = false;
}

如果使用的是p5.js框架的get()方法，画面开启抗锯齿时返回的RGBA数值可能存在±1~2的误差，如果出现偶尔匹配失败的情况，可以给每个通道的判断增加容错区间，例如Math.abs(gc[0] - 0) < 3 && Math.abs(gc[1] - 0) < 3 && Math.abs(gc[2] - 255) < 3。

内容的提问来源于stack exchange，提问作者Maddox Fox