vue使用canvas实现移动端手写签名

基于vue使用canvas实现移动端手写签名！

之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流 。自己在网上找了一堆，都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。

HTML部分：

为了节约时间，样式写的比较简单。凑合看吧！

script部分

css部分

  .hello{
    height: 100%;
    width: 100%;
    background: #ccc;
      h1, h2 { font-weight: normal; } 
      ul { list-style-type: none; padding: 0; } 
      li { display: inline-block; margin: 0 10px; } 
      a { color: #42b983; } 
      #canvas { background: pink; cursor: default; } 
      #keyword-box { margin: 10px 0; } 
      button{font-size: 0.2rem;color: blue;}
 }

效果图：

就到这里吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。