JS canvas实现画板和签字板功能代码示例

本篇文章小编给大家分享一下JS canvas实现画板和签字板功能代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

前言

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

本文特点：

原生JS

封装好的模块

最简代码样例

结果展示

代码讲解

思路

1、鼠标按下，开始描画。鼠标按下事件。

2、鼠标弹起，结束描画。鼠标弹起事件。

3、鼠标按下移动，路径画线。鼠标移动事件。

代码讲解

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

1、只有在鼠标按下，才会触发移动绘图的效果，所以需要增加一个状态判断。

2、因为鼠标指针和实际位置有一个偏移量，所以在坐标定位的时候，需要增加pagex-10从而使坐标位于指针的尖端处。

3、每次移动都要更新坐标位置，用小段的线段来模拟不规则的线。

封装模块