JS canvas实现画板和签字板功能

本文实例为大家分享了JS canvas实现画板/签字板功能的具体代码，供大家参考，具体内容如下

前言

常见的电子教室里的电子黑板。

本文特点：

原生JS
封装好的模块

最简代码样例

结果展示

代码讲解

思路

1、鼠标按下，开始描画。鼠标按下事件。
2、鼠标弹起，结束描画。鼠标弹起事件。
3、鼠标按下移动，路径画线。鼠标移动事件。

代码讲解

整体思路：按下鼠标，触发移动的开关，移动后开始记录线条（用移动后的坐标-移动前的坐标，然后绘线），每次移动都会更新旧坐标。松开鼠标后，释放移动开关。

1、只有在鼠标按下，才会触发移动绘图的效果，所以需要增加一个状态判断。
2、因为鼠标指针和实际位置有一个偏移量，所以在坐标定位的时候，需要增加pagex-10从而使坐标位于指针的尖端处。
3、每次移动都要更新坐标位置，用小段的线段来模拟不规则的线。

封装模块

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。