h5-canvas 单像素操作

###1. 自定义获取指定坐标像素

  var canvas = document.querySelector("#cav");

  if(canvas.getContext){

    var ctx= canvas.getContext("2d");

    ctx.fillRect(100,100,200,200)

    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

    var color = getColor(imageData,50,50);

    console.log(color);

    function getColor(imageData,x,y){

      var data = imageData.data;

      var w = imageData.width;

      var color = [];

      color[0] = data[4*(x*w+y)];   //  R

      // 例如:(1,2)该点有y*w行   +  x 个像素  即 2*2+1=5

       color[1] = data[4*(y*w+x)+1];   // G

      color[2] = data[4*(y*w+x)+2];    //  B

      color[3] = data[4*(y*w+x)+3];    //   A    

      return color;

    }

  }

注意:css定义的是canvas背景颜色,使用getImageData获取的是canvas画布上的元素信息,默认为黑色透明

  

上一篇:javascript中BOM部分基础知识总结


下一篇:最近招两个兼职的活(PHP和JSP)