实现逻辑是这样:
1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,弹起做什么.一般鼠标事件都是判断弹起的位置
2,判断有效坐标,在事件中判断坐标位置是否在图片位置,也就是图片在canvas的位置.
ex:
//some code...
canvas.width=400
canvas.height=400
var context2d = canvas.getContext("2d")
var img =new Image()
img.src="xxx/xxx.png"
img.onload=function(){
context2d.drawImage(img,X,Y,WIDTH,HEIGTH)
//X=0,Y=0,W=50,H=50
canvas.addEventListener("mouseup", keyUp, false)
}
function keyUp(evt){
Event_UpX = evt.offsetX
Event_UpY = evt.offsetY
if(Event_UpX>=绘制坐标X&&Event_UpX<=图片宽度){
if(Event_UpY>=绘制坐标Y&&Event_UpY<=图片高度){
//do something
}
}
}
事件属性button，是触发事件的时候，获取事件对象获取button的值判断，是按下了鼠标的哪个键。
1、首先创建一个名称为button的html文件，如下图所示。
2、在body中加入onmousedown事件，事件中加入自定义函数，函数中加入事件返回对象。
3、接着加入一个p标签加入id，如下图所示。
4、然后创建一个自定义函数mybutton，如下图所示。
5、自定义函数中通过event。button属性获取整数值，并判断整数值来区分鼠标按键。
6、最后在浏览器中打开文件，在指定区域随意按下鼠标按键，查看结果。
