在HTML5 canvas getImageData上迭代时获取X和Y像素坐标

Question

我正在迭代从canvas类似的一些图像数据,所以:

var imageData = this.context.getImageData(0, 0, this.el.width, this.el.height);
var data = imageData.data;

for (var i = data.length; i >= 0; i -= 4) {
    if (data[i + 3] > 0) {
        data[i] = this.colour.R;
        data[i + 1] = this.colour.G;
        data[i + 2] = this.colour.B;
    }
}

如何计算当前的X和Y像素坐标？

Answer 1

已更正和测试的代码版本:

var x = (i / 4) % this.el.width;
var y = Math.floor((i / 4) / this.el.width);

Answer 2

一个简单的算术序列:

将线性位置除以宽度.那是你的Y坐标.将Y坐标乘以宽度,并从线性位置减去该值.结果是X坐标.

另请注意,由于它是RGBA,因此必须将线性位置除以4.