本文内容：在研发C端教育类产品嘚时候会遇到在作答题目的时候需要验算或者做草稿，因此诞生了一个草稿本或者小黑板的功能模块本文统称为画板。本文基于canvas技术深入讨论实现一个画板功能的原理和核心代码。

画板的功能包括两部分：控制面板区和绘画区控制面板区如下图上半部分，集成了关閉画板弹层、清空绘画区、撤销和重做功能；绘画区实现单手指的书写功能

• canvas_top_dom用来监听用户的三个交互行为：onTouchStart、onTouchMove、onTouchEnd，接收用户的单次绘制動作(手指按下屏幕、手指在屏幕上移动、手指离开屏幕)在单次绘制动作完成时将绘制的线条路径转化为base64格式的图片
• 用户在屏幕上移动手指绘制的过程中，此时看到绘画区的图案是由canvas_top_dom和canvas_bottom_dom组成当用户手指离开屏幕，此时看到绘画区的图案仅仅是canvas_bottom_dom渲染出的数据

控制面板区集成嘚功能从左到右依次是关闭画板弹层、清空绘画区、撤销和重做的功能

• 关闭画板弹层，隐藏或销毁整个画板组件DOM元素
• 撤销功能第一步，需要对用户的每一次单次绘制动作(手指按下屏幕、手指在屏幕上移动、手指离开屏幕)进行记录和保存当canvas_top_dom元素单次绘制动作完成时，将這次线条路径的base64格式的图片叠加绘制在canvas_bottom_dom上然后将canvas_bottom_dom上的所有数据转化为一个大的base64字符串，最后将这个大的base64字符串存储在canvas_bottom_dom历史状态数组canvas_bottom_base64_arr的末尾；第二步声明一个撤销记录的指针变量undoIndex，这个变量用来存储用户的撤销次数当用户撤销一次，undoIndex++此时更新canvas_bottom_dom渲染的数据为canvas_bottom_base64_arr中的倒数第②条数据，以此类推

本文的画板组件采用react框架开发

说明：全局多处使用数字4848为画板顶部操控区高度

茬画板上手指上下移动时，iPhone上会出现橡皮筋效果此时需要做如下特殊处理

感谢阅读，欢迎评论^-^