如何在html5画布中获取像素的像素坐标

时间:2011-04-09 17:19:05

标签: html5 canvas coordinates pixel

我知道你可以使用getImageData()和.data()来获取html5 Canvas中每个像素的值,但有没有办法获取它们的坐标而不仅仅是它们的值?

1 个答案:

答案 0 :(得分:6)

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