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之类 除了基本点击还带一些物理效果

标签： 前端

[toc]

经常都会遇到一些上传图片前裁剪的需求，这个时候一般都会找到第三方的插件来完成需求。但有时（很不幸）会遇到一些难以处理的情况，例如找不到满足需求的插件或者插件太大而只用到其中一个功能，这种时候就需要自己动手实现一个裁剪工具了。

因此了解一下如何用canvas来实现裁剪功能（其实可以做到更多）是很有必要的，那么现在就开始吧：

分为以下几个步骤

好像有点太简略。。

下面讲一下自己的例子，功能就是读取图片，左右两个canvas，左边有个半透明蒙版选择裁剪大小，右边输出裁剪后图片。

用 <input type="file">读取本地文件，监听 onchange 事件，使用 Image 对象来做个中转方便canvas使用

这个例子是鼠标框选截图，因此先加上鼠标事件

画个镂空的蒙版表示选择框，这里用到 globalCompositeOperation ，图片合并效果来实现蒙版，具体见 MDN

这样就实现了图片蒙版选择框，下面是截图，很简单

很简单，用到 canvas.toBlob 输出二进制数据，然后转 File 就可以

对实现一个功能感到不知所措的时候，很可能就是对基础的api不熟悉，就像这个例子中，如果不知道canvas有 getImageData , putImageData 这两个api，那么就不知道如何实现裁剪了，然后就陷入不停找插件的困境。所以，不知道怎么办时别慌，找找js的api。

---