html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>canvas电子签名</title>
</head>

<body>
  <div id="canvas">
  </div>
  <p id="clearCanvas">清除</p>
  <p id="saveCanvas"> 保存</p>
</body>

</html>

css

<style>
    html,
    body {
      width: 100%;
      height: 100%;
    }

    #canvas {
      width: 100%;
      height: 4rem;
      position: relative;
    }

    #canvas canvas {
      display: block;
    }

    #clearCanvas {
      width: 1rem;
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      border: 1px solid #DEDEDE;
      z-index: 1;
      font-size: 0.12rem;
    }

    #saveCanvas {
      width: 1rem;
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
      border: 1px solid #DEDEDE;
      z-index: 1;
      font-size: 0.12rem;
    }
  </style>

javascript

<script>
    window.onload = function() {
      new lineCanvas({
        el: document.getElementById("canvas"), //绘制canvas的父级div
        clearEl: document.getElementById("clearCanvas"), //清除按钮
        saveEl: document.getElementById("saveCanvas"), //保存按钮
        linewidth: 1, //线条粗细，选填
        color: "black", //线条颜色，选填
        background: "#ffffff" //线条背景，选填
      });
    };

    function lineCanvas(obj) {
      this.linewidth = 1;
      this.color = "#000000";
      this.background = "#ffffff";
      for (var i in obj) {
        this[i] = obj[i];
      };
      this.canvas = document.createElement("canvas");
      this.el.appendChild(this.canvas);
      this.cxt = this.canvas.getContext("2d");
      this.canvas.width = this.el.clientWidth;
      this.canvas.height = this.el.clientHeight;
      this.cxt.fillStyle = this.background;
      this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
      this.cxt.strokeStyle = this.color;
      this.cxt.lineWidth = this.linewidth;
      this.cxt.lineCap = "round";
      //开始绘制
      this.canvas.addEventListener("touchstart", function(e) {
        this.cxt.beginPath();
        this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
      }.bind(this), false);
      //绘制中
      this.canvas.addEventListener("touchmove", function(e) {
        this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
        this.cxt.stroke();
      }.bind(this), false);
      //结束绘制
      this.canvas.addEventListener("touchend", function() {
        this.cxt.closePath();
        console.log('end', this)
      }.bind(this), false);
      //清除画布
      this.clearEl.addEventListener("click", function() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }.bind(this), false);
      //保存图片，直接转base64
      this.saveEl.addEventListener("click", function() {
        var imgBase64 = this.canvas.toDataURL();
        var a = document.createElement('a')
        a.href = imgBase64;
        a.download = imgBase64
        a.click()
        return false
      }.bind(this), false);
    };
    (function(doc, win) {
      const docEl = doc.documentElement
      const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      const recalc = function() {
        const clientWidth = docEl.clientWidth
        if (!clientWidth) return
        if (clientWidth >= 750) {
          docEl.style.fontSize = '100px'
        } else {
          docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'
        }
      }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
  </script>

用canvas带你走进移动端的电子签名

html

css

javascript