JS前端使用canvas编写一个签名板_JavaScript_

需求

需求是做不完了，福利也被砍了，旅游也泡汤了，手上有2个需求，还没做完，PM就来新需求了。

开发一个签名板：要求PC端/移动端都能用、扫码签名、实时同步、可以改变笔画粗细、笔画颜色、可以生成base64图片。

方案分析canvas

1.获取页面[canvas]元素，设置宽高（800*200）

2.通过**HTMLCanvasElement.getContext()**  方法返回[canvas] 的上下文ctx

3.初始化ctx基础属性

• 线条颜色
• 线条宽度
• 线条末端形状

4.开始绘画

• 监听鼠标事件
• 绘制起点、终点

5.生成一个移动端链接二维码

6.在移动端签名时，通过WebSocket，实时传递数据给PC端。

涉及知识点

Canvas涉及特性：

• 基本属性

getContext()

strokeStyle

fillStyle

lineCap

lineJoin

• 路径绘制

beginPath()

lineTo()

moveTo()

• 其他方法（生成base64，清除画板）

toDataURL()

clearRect()

涉及鼠标事件：

mousemove

mousedown

mouseup

mouseout

涉及移动端触摸事件：

touchstart

touchend

touchmove

代码

 扫码签名 
重置生成图片

以上代码，未开发的点

• 移动端触摸事件，禁止移动端屏幕，修改笔画粗细、笔画颜色
• 实时同步WebSocket
• 实时同步笔画时，如何让笔画有实时同步一笔一画的效果？下图

以上就是JS前端使用canvas编写一个签名板的详细内容，更多关于JS canvas签名板的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！