如何在canvas画布上特定位置监听鼠标事件

canvas内容是没有事件的 有事件的只有canvas本身

通过鼠标在canvas上面移动获取鼠标位置以此来改变点击事件可以

比如 一个长方形或者正方形

计算长方形 200px*100px 根据中心点x 鼠标位置x 距离中心点 <100 and y和鼠标y距离<50

或者一个圆的半径为10px 计算方式就是

var X = 鼠标位置 X - 圆中心位置 X

var Y = 鼠标位置 Y- 圆中心位置 Y

Math.pow((X *X + Y * Y), 0.5)<10

在往其他的一些不规则图形就比较麻烦了需要很高的数学功底

如果不会计算何以试试一些插件

pixi 或者Phase之类 除了基本点击还带一些物理效果

贝塞尔曲线

场景：

创建简易的绘图工具，实现控制画布上的四个锚点的拖拽修改已经绘制的曲线图，通过注释实时显示锚点的具体实时坐标，并通过反色清楚的显示控制点的位置

要求：

1. 创建一个512*512的canvas画布

2. 在该画布上任意创建四个锚点，使用贝塞尔曲线进行连接

3. 可在画布上自由拖拽上面的锚点，从而实现贝塞尔曲线的联动，每个点都有一个跟随点移动的注释（文字+箭头），说明该点的坐标

4.在此基础上，实现一个黑白渐变色的背景，然后在锚点周围20个像素内，将锚点所处的背景作反色，突出锚点的显示

明确:

贝塞尔曲线通过canvas绘制,canvas自带贝塞尔曲线绘制方法 bezierCurveTo()

显示锚点可以在canvas上覆盖div 将锚点放在div中

锚点拖动,添加事件监听, 鼠标按下 为被点击的锚点 添加鼠标移动事件,松开 注销鼠标移动事件

拖动锚点时要做什么?

修改注释内的坐标

canvas根据锚点坐标重绘贝塞尔曲线

锚点周围20像素背景色取反

你的意思是用canvas2D绘制是吧?

实际上,拿canvas2D绘制,只是把image渲染到 canvas(画布上).而实际的事件,就不能像标签那么处理,应该对canvas的事件做处理.

实现逻辑是这样:

1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,d起做什么.一般鼠标事件都是判断d起的位置

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

}

}

}

---