獲取X和Y像素座標，當遍歷HTML5畫布getImageData

我遍歷從canvas一些圖像數據拉着，像這樣：獲取X和Y像素座標，當遍歷HTML5畫布getImageData

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像素座標，我在？

來源

2012-12-01 jcvandan

簡單的算術序列：

將線性位置除以寬度。這是你的Y座標。將Y座標乘以寬度，然後從線性位置中減去該值。結果是X座標。

另請注意，由於它是RGBA，所以必須將線性位置除以4。

來源

2012-12-01 15:17:15

多德 - 感謝的是，我一直在敲打我的頭撞牆了幾個小時與此，現在排序 – jcvandan

你能提供一個例子嗎？我不認爲我完全理解這個順序。下面的答案是否正確？我正在努力獲得像素的X和Y座標。任何幫助將非常感激。 – Awin

我想我只需要知道「線性位置」的含義。這是數據數組中的位置嗎？或者是索引的像素位置/ 4？ – Awin

這應該工作

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

來源

2012-12-01 15:40:12 lostsource

不工作..測試 – user889030

修正和測試的代碼版本：

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

來源

2013-12-07 19:58:24 user11153

工程..測試 – user889030

獲取X和Y像素座標，當遍歷HTML5畫布getImageData

回答

相關問題