小程序/web端实现画板功能，项目记录，如果能帮到各位点个 thumb

大家好，お久しぶりです（好久不见，主要是偷懒没写）。这次主要是实现小程序实现画板功能（web端同理），下面进入正题。（只贴出小程序的代码）

这次的项目需求是给搞绘图的学生弄一个画图的功能。最终实现效果如下：

弄了一个代码片段，有兴趣的朋友可以下下来看看。（最下方↓）

功能有：画直线、二次贝塞尔曲线、自由画线、矩形、圆、撤销、恢复等功能。

不过首先声明一下，由于canvas无法对单一路径进行删除，所以无法实现在绘制矩形、圆出现实时路径。（或者说小汪太菜不会，恳请指点），

但不是毫无办法，理论上使用一个元素，实时通过样式实现此效果也是可以的，但由于原生组件的层级问题，小程序并不是那么好实现，研究过，使用cover-view理论可以实现这一效果。但实际测试就是 cover-view无法盖在canvas上，也试过很多方法，如：给cover-view设置出现延迟，放在canvas里边；都不行，但是如果不需要背景图（也就是底图）就可以盖住。所以这个问题大家自己去想解决方案吧，看看官方准备怎么解决（也可能是我自己还不会用的问题，有兴趣可以评论区讨论）。当然，代码片段中也有矩形与圆的操作案例，有兴趣可以了解一下；下面讲讲实现思路：

1.矩形：在手指/鼠标按下时记录按下点位置，在手指移动的过程中不断更新盒子的大小实现此目的。

2.圆：与矩形同理，不过在样式上有一个调整，那就是改变圆心（因为小汪写的代码是以起始点为圆心向外扩张）。

3.贝塞尔曲线的话由于要标点，所以建议给出一个小提示。然后再有cover-view 标识出点位 如：画布的 （20,20） 标记数字1 （40,40）标记数字2…

4.直线：直线的话处理起来比较麻烦，因为你在移动中绘制的话就一直保留着之前的路径，想用cover-view来弄一个显示效果还得算路径/角度 然后用css渲染，只能有时间在来补全这篇文章了。如果有大佬能搭把手那就更好啦（心中窃喜）

关于代码逻辑思路与备注 小汪在代码片段中已经写的挺详细，可以下下来观看。案例中有绘制路径点击确定保存的图片是无底图的，所以如果不考虑性能的情况下，可以使用2张画布，1张给用户做操作用，可见。一张绘制底图并保留用户在画布1绘制的内容。最后生成是以画布2为主。

使用效果图，无路径：

使用效果图，带路径：

代码片段地址：https://developers.weixin.qq.com/s/QHGXtlmj7prF

非常感谢各位姥爷能看到这里。如果这篇文章对你有所帮助，希望不要吝啬那几秒钟的时间点个赞吧。没帮助也看到这里，也给整一个？ 哈哈 开个玩笑 老爷们随意。但是小汪期望与各位大佬多交流 嘿嘿。下次再见

注：转载请注明出处！