Как получить пиксельные координаты пикселя внутри HTML5-холста - PullRequest
Новая
       21

Как получить пиксельные координаты пикселя внутри HTML5-холста

1 голос
/ 09 апреля 2011

Я знаю, что вы можете получить значение каждого пикселя в html5 Canvas, используя getImageData () и .data (), но есть ли способ получить их координаты, а не только их значения?

1 Ответ

6 голосов
/ 09 апреля 2011 
var w = ctx.canvas.width, h = ctx.canvas.height;
var id = ctx.getImageData(0,0,w,h);
var d = id.data;
for (var y=0;y<h;++y){
  for (var x=0;x<w;++x){
    var i=(y*w+x)*4;
    var r=d[i],g=d[i+1],b=d[i+2],a=d[i+3];
  }
}

Так же просто извлечь x / y из индекса при циклическом просмотре массива данных изображения или добавить смещения, если вы выбрали только часть пикселей холста. 

for (var i=0,len=d.length;i<len;i+=4){
  var x=i/4%w,y=(i/4-x)/w;
  var r=d[i],g=d[i+1],b=d[i+2],a=d[i+3];
}
...