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画布上的元素信息，默认为黑色透明

　　

转载于:https://www.cnblogs.com/john-hwd/p/10568779.html