प्राप्त एक्स और वाई पिक्सेल का समन्वय करता है जब एचटीएमएल 5 से अधिक पुनरावृत्ति getImageData

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; 
    } 
} 

मैं वर्तमान एक्स गणना कैसे करते हैं और वाई पिक्सेल का समन्वय करता है कि मैं कर रहा हूँ पर?

Answer 1

एक साधारण अंकगणित अनुक्रम:

फूट डालो चौड़ाई द्वारा रैखिक स्थिति। यह आपका वाई-समन्वय है। चौड़ाई से वाई-समन्वय गुणा करें, और रैखिक स्थिति से उस मान घटाएं। परिणाम एक्स समन्वय है।

यह भी ध्यान दें, आपको रैखिक स्थिति को 4 से विभाजित करना होगा क्योंकि यह आरजीबीए है।

Answer 2

यह काम करना चाहिए

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

Answer 3

सही किया और कोड के किस संस्करण का परीक्षण किया:

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