canvas-交互

isPointInPath() 介绍

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath

CanvasRenderingContext2D.isPointInPath() 是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。

isPointInStroke() 介绍

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInStroke

CanvasRenderingContext2D.isPointInStroke() 是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。

拖拽小方块

想要拖拽小方块，我们利用 isPointInPath() 来判断某一时刻鼠标是否在矩形路径内，如果在路径内，则切换方块为拖拽状态，设定拖拽的样式变化（如光标变小手等等），然后随着鼠标的按下移动通过不断地清除、设定路径、绘制此时刻图像来达成视觉上的拖拽的目的。

另外有一些必要的细节，我们一定要注意：当鼠标按下拖拽的时候光标位置在矩形内的某个位置，那么在矩形移动后，光标也应该不断保持在矩形的那个位置。