头像截图小插件 【前端】

上周花两天时间写了一个头像截图的插件（插件？），能够完成本地图片上传，选择指定区域截图的功能。

github地址：点击打开链接

canvas的圆角遮罩：

1、如果是canvas元素，直接指定canvas元素的css，设定圆角

2、如果是想在canvas里绘制圆形遮罩：

ctx.save();

//绘制一个圆

ctx.arc(x,y,r,stangle,enangle)

//剪切该区域，然后之后所有的绘图都被限制在剪切区域内，不能访问画布上的其他区域

ctx.clip();

//然后清除这一块圆形区域（因为现在清楚操作只对圆形区域有效）

ctx.clearRect(0,0,canW,canH);

ctx.restore();

drawImage(imgae,...):

注意，有些操作要在图片已经正确加载完成后才能进行的，需要放在image.onload函数中。否则会导致不稳定出错。

window.onload是js方法，body.ready是jq方法，$(body).ready。在发生时间上来说，前者是在dom树加载完成，并且所有文件也加载完成的情况下执行的，后者是在body的dom结构加载完成的情况下执行的（可能文件还没有加载完）。所以后者比前者现执行

关于鼠标位置的各个函数：

对于页面的定位：

pageX: 相对于页面来说，页面滚动对其有影响

clientX: 相对于浏览器的可视窗口来说，页面滚动对其无影响

关于元素的定位：

offsetX: IE特有，参考坐标是触发事件元素，参考点是盒子模型的左上角（IE的模型包括border）

layerX: FF特有，参考坐标是触发事件元素，如果当前元素的定位不是绝对定位或者是相对定位，就以页面为参考。参考点也是包括border在内的左上角

『题外』定位：

screenX：浏览器相对于屏幕所在位置