如何在canvas中获取鼠标位置的颜色信息

我们使用 getImageData 来获取当前位置的颜色信息

getImageData拥有一个data数组，里面存放的就是我们的颜色信息

var myColor = ctx.getImageData(e.offsetX, e.offsetY, 1, 1)
//这个方法有四个参数 很显然前两个参数的鼠标的坐标，后两个参数是获取的宽高
//如果只获取鼠标点击的位置颜色，1,1就可以。

我们可以把这个放在任何地方（当然是和canvas有关的事件）
我把它放在onmousemove中

 cav.onmousemove=function(e){
  	var myColor = ctx.getImageData(e.offsetX, e.offsetY, 1, 1)
//	用getImageData获取当前的位置的色素
  ctx.fillText(colorStr,60,60,100)
//获取坐标

通过获取到的信息来判断我们获取位置的颜色

if(myColor.data[0]==75&&myColor.data[1]==210&&myColor.data[2]==110&&myColor.data[3]==255){
  		colorStr='草地'
  	}else if(myColor.data[0]==31&&myColor.data[1]==179&&myColor.data[2]==255&&myColor.data[3]==255){
  		colorStr='深水'
  	}else if(myColor.data[0]==112&&myColor.data[1]==206&&myColor.data[2]==255&&myColor.data[3]==255){
  		colorStr='浅水'
  	}else if(myColor.data[0]==234&&myColor.data[1]==218&&myColor.data[2]==129&&myColor.data[3]==255){
  		colorStr='沙滩'
  	}

ok那我们现在来看一下完整的代码片段

cav.onmousemove=function(e){
  	var myColor = ctx.getImageData(e.offsetX, e.offsetY, 1, 1)
//	用getImageData获取当前的位置的色素
  	if(myColor.data[0]==75&&myColor.data[1]==210&&myColor.data[2]==110&&myColor.data[3]==255){
  		colorStr='草地'
  	}else if(myColor.data[0]==31&&myColor.data[1]==179&&myColor.data[2]==255&&myColor.data[3]==255){
  		colorStr='深水'
  	}else if(myColor.data[0]==112&&myColor.data[1]==206&&myColor.data[2]==255&&myColor.data[3]==255){
  		colorStr='浅水'
  	}else if(myColor.data[0]==234&&myColor.data[1]==218&&myColor.data[2]==129&&myColor.data[3]==255){
  		colorStr='沙滩'
  	}
	str=e.offsetY+','+e.offsetX
  }
  ctx.fillText(str,50,50,50)
  ctx.fillText(colorStr,60,60,100)

如果看不太明白这么多的if判断，多console.log一下getImageData获取到的数据就懂了

cav是获取到的canvas元素
ctx是画图工具