vue 使用原生canvas_vue使用canvas签名之清空和保存

效果

需求

在一些项目业务中，经常会使用到画板，让用户自己去写/画一些东西做标示，比如说在线签电子合约、签名等，在上两篇博客中，已经解决了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 代码示例