Question

对于个人项目，我正在为Java重新实现一些Javascript代码。在这一点上惹我兴奋的一件特别事情是，HTML5 CanvasPixelArray对象中的Color是由三个还是四个索引值表示。

上面链接的页面表明使用了偏移值4。但是，我正在重新实现的一个图形效果具有此功能：

function getPixelValue(x, y) {
  var offset = (x + y * width) * 4;
  var r = imageData[offset];
  var g = imageData[offset + 1];
  var b = imageData[offset + 2];

  return ( ((255 << 8) | r) << 8 | g) << 8 | b;
}

返回给定像素的颜色整数值。代码在浏览器中工作，但我对这个事实感到困惑，r, g, b全部包含在数组的给定3个块段中，而offset是4.这个相同的偏移值显示在上面链接的页面的代码示例中。

差异的原因是什么？如果像素颜色值包含在3块区段内，那么offset不应该包含3作为常量？

Answer 1

Canvas 始终返回RGBA，但如果您不需要它，则可以跳过Alpha通道（索引3），但总是必须跳过字节数组中的4个位置。

通常对于照片，alpha值始终为255（非透明），因此不需要。对于已经包含alpha通道的其他类型的图形（例如PNG图标等），alpha通道变得更加重要。

您的getPixelValue只是忽略了Alpha通道并返回了与Alpha通道值无关的RGB值（当您需要来自源的颜色值时，这是正确的 - 颜色无论alpha值如何，值（来自源）都是相同的。）

CanvasPixelArray - 一个颜色值有多少个索引点？

1 个答案: