效果
需求
在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约、签名等,在上两篇博客中,已经解决了PC端和移动端的Canvas签名,那么在签名完成之后,我们如何将画布上东西保存,或者清空呢? 【本篇包含PC和移动端的签名,以及清空和保存】
分析
在前两篇中,分辨实现了 PC端canvas签名以及 移动端canvas签名,要是形成一个简单且完整的功能点,我们起码还缺少清空和保存两个环节。接下来分析一下。
1. 清空
就是将此前所画的所有笔画清除掉,方法则是清空存放点集合的数组重新设置画布宽高即可。另外一个方法,也可以使用 clearRect(),这个方法是清空画布中一个矩形区域内的内容。由于我们并为保存所有点集合,所以采用此方法清空。
1.1 关于clearRect
// clearRect() 方法清空给定矩形内的指定像素。
context.clearRect(x,y,width,height);
参数
描述
举例(全部清空)
x
要清除的矩形左上角的 x 坐标
0
y
要清除的矩形左上角的 y 坐标
0
width
要清除的矩形的宽度,以像素计
context.width
height
要清除的矩形的高度,以像素计
context.height
1.2 代码示例