如何用HTML5 Canvas实现类似Photoshop钢笔工具的图像抠图功能？

本文共计2559个文字，预计阅读时间需要11分钟。

使用HTML5 Canvas和JavaScript实现PS铅笔涂抹功能：

1. 项目需求： 在近三到四天内，通过JavaScript实现了类似于Photoshop中铅笔涂抹的功能。最终虽然不是完全的功能复制，但基本实现了该功能。

2. 实现过程： 在实现过程中遇到了不少挑战，但最终通过不断尝试和调整，成功地将该功能基本实现。

html5 canvas+js实现ps钢笔抠图

1. 项目要求需要用js实现photoshop中钢笔抠图功能，就用了近三四天的时间去解决它，最终还是基本上把他实现了。

做的过程中走了不少弯路，最终一同事找到了canvans以比较核心的属性globalCompositeOperation = "destination-out",

属性可以实现通过由多个点构成的闭合区间设置成透明色穿透画布背景色或是背景图片，这样省了许多事。

2.实现效果：

鼠标点完之后会将所有的点连成闭合区间，并可自由拖拉任一点，当形成闭合区间后，可在任意两点之间添加新点进行拖拉。

3.实现思路：

设置两层div,底层设置图片，顶层设置canvas画布（如果将图片渲染到画布上，抠图时会闪烁，所以至于底层），在画布上监视

鼠标事件反复渲染点及之间连线，形成闭合区间后将整体画布渲染小块背景图片，并将闭合区间渲染透明色。