vue h5移动端使用canvas实现手写签名并生成png图片，支持修改画笔颜色和画笔粗细，画布颜色及宽高（附完整代码）

1、首先在vue项目的components目录下创建Signature.vue文件，并添加组件封装代码。

<template>
  <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" :style="`background:${canvasBackgroung}`"></canvas>
</template>
<script>
/**
 * @canvasWidth :      画布宽度     type： Number
 * @canvasHeight ：    画布高度     type： Number
 * @canvasBackgroung : 画布颜色     type： String,  颜色值
 * @lineWidth :        画笔粗细     type:  Number
 * @stokeColor :       画笔颜色     type:  String,  颜色值
 * save() :     url: base64格式图片，file：png图片文件 调用保存方法并返回签名图片文件及base64格式图片
 * clear() :    清除画板
 */
var draw;
var preHandler = function(e) {
  e.preventDefault();                                                     //阻止默认事件
};
class Draw {
  constructor(el) {
    this.el = el;
    this.canvas = document.getElementById(this.el); 
    this.cxt = this.canvas.getContext("2d");                              //设置绘图环境为2D
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight; 
    this.stage_info = canvas.getBoundingClientRect();                     //用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
    this.path = {
      beginX: 0,
      beginY: 0,
      endX: 0,
      endY: 0
    };
  }
  init(btn) {
    var that = this;
    this.canvas.addEventListener("touchstart", function(event) {            //给canvas添加触摸开始事件
      document.addEventListener("touchstart", preHandler, false);           //当点击画布进行绘制时，禁止canvas外部默认事件
      that.drawBegin(event);
    });
    this.canvas.addEventListener("touchend", function(event) {              //给canvas添加触摸结束事件
      document.addEventListener("touchend", preHandler, false);             //当触摸离开时，禁止canvas外部默认事件
      that.drawEnd();
    });
    this.clear(btn);                                                        //清除画布
  }
  drawBegin(e) {
    var that = this;
    window.getSelection()                                                   //双击禁止选中文字  || window.getSelection()，返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。
      ? window.getSelection().removeAllRanges()                             //将所有的区域都从选区中移除
      : document.selection.empty();                                         //让选中的内容不选中
    this.cxt.beginPath();                                                   //起始一条路径，或重置当前路径
    this.cxt.moveTo(                                                        //把路径移动到画布中的指定点，不创建线条
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    );
    this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left;
    this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top;
    canvas.addEventListener("touchmove", function() {
      that.drawing(event);
    });
  }
  drawing(e) {
    this.cxt.lineTo(