在HTML5 canvas getImageData上迭代时获取X和Y像素坐标 [英] Get X and Y pixel coordinates when iterating over HTML5 canvas getImageData
本文介绍了在HTML5 canvas getImageData上迭代时获取X和Y像素坐标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在迭代从 canvas
中提取的一些图像数据,如下所示:
I am iterating over some image data pulled from a canvas
like so:
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像素坐标我在哪?
How do I calculate the current X and Y pixel coordinates that I am at?
推荐答案
一个简单的算术序列:
将线性位置除以宽度。这是你的Y坐标。将Y坐标乘以宽度,并从线性位置减去该值。结果是X坐标。
Divide the linear position by the width. That's your Y-coordinate. Multiply that Y-coordinate by the width, and subtract that value from the linear position. The result is the X coordinate.
另外请注意,由于它是RGBA,您必须将线性位置除以4。
Also note, you will have to divide the linear position by 4 since it is RGBA.
这篇关于在HTML5 canvas getImageData上迭代时获取X和Y像素坐标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文