javascript根据像素点取位置示例

  

复制代码 代码如下:

  <html>

  <body>

  <canvas id="canvas" width="100" height="100" style="background-color: #000;"/>

  <script>

  function position  (x,y){

  this.x = x;

  this.y = y;

  }

  var canvas = document.getElementById('canvas'),

  ctx = canvas.getContext('2d');

  width = canvas.width,

  height = canvas.height;

  ctx.fillStyle = "#FF0000";

  ctx.font = "20px Arial";

  ctx.fillText("妈妈",10,50);

  var pixs = ctx.getImageData(0,0,width,height).data;

  var Pixels = new Array();

  for(var i=0;i<pixs.length;i+= 4)

  {

  var r = pixs[i],

  g = pixs[i+1],

  b = pixs[i+2],

  a = pixs[i+3];

  if(r != 0 || g != 0 || b != 0 ){

  var x = i%400;

  var y = i/400;

  Pixels.push(new position(x,y));

  }

  }

  </script>

  </body>

  </html>