如何用JavaScript和HTML5 Canvas实现类似Photoshop的钢笔抠图功能？

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

使用HTML5 Canvas和JavaScript实现类似Photoshop的铅笔涂图功能：

1. 项目需求： 利用JavaScript在HTML5 Canvas上实现类似Photoshop的铅笔涂图功能，近期三天内完成需求分析并实现基本功能。

2. 实现过程： 在项目开发过程中，遇到了不少挑战，最终通过不断尝试和优化，成功地将这一功能基本实现。

html5 canvas+js实现ps钢笔抠图

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

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

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

2.实现效果：

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

3.实现思路：

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

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

坐标记录或更新到数组中去。截完图后，将点的坐标集合传回后台，由后台代码实现根据坐标点及图片宽度高度实现截图，并设

至背景色为透明色（canvas也可以实现截图，但需要处理像素点实现背景透明，暂时还没实现，计划用C#后台代码实现）。