效果图

概述

在线签名，现在在很多场景下都能看到，而且在移动端见的比较多。

用canvas和svg都可以实现，而且跨平台能力也很好。

• canvas基于像素，提供 2D 绘制函数，提供的功能更原始，适合像素处理、动态渲染和大量数据绘制，可控性高，绘制完了基本不记录过程，绘图性能会更好一点，各大厂商也早都实现了canvas的硬件加速机制。而且能够以.png或.jpg格式保存结果图像
• svg为矢量，提供一序列图形元素，功能更完善，建立了一大堆可交互对象，本性长于交互，但性能会弱些，更适合静态图片展示，高保真文档查看和打印的应用场景。

两者各有自己擅长的领域，基于以上，以下是用canvas实现的移动端签字功能。从创建、设置、监听绘制、重绘、保存等进行处理。

代码

html结构

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

css样式

html,
body {
    width: 100%;
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

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

#canvas canvas {
    display: block;
}

#clearCanvas,
#saveCanvas {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 50%;
    height: 40px;
    border: 1px solid #dedede;
    line-height: 40px;
    text-align: center;
}

#clearCanvas {
    left: 0;
}

#saveCanvas {
    right: 0;
}

.errorCanvas {
    width: 100%;
    height: 100%;
    text-align: center;
    transform: translateY(40%);
}

js内容

window.onload = function () {
  new lineCanvas({
    el: document.querySelector(\'#canvas\'),
    clearEl: document.querySelector(\'#clearCanvas\'),
    saveEl: document.querySelector(\'#saveCanvas\'),
    // lineWidth: 1, // 线条粗细
    // color: \'black\', // 线条颜色
    // background: \'#fff\'
  });
}

function lineCanvas(obj) {
  this.lineWidth = 5;
  this.color = \'#000\';
  this.background = \'#fff\';
  for (var i in obj) {
    this[i] = obj[i];
  };

  this.canvas = document.createElement(\'canvas\');
  if (!(this.canvas.getContext && this.canvas.getContext(\'2d\'))) {
    this.section = document.createElement(\'section\');
    this.section.className = \'errorCanvas\';
    this.section.innerHTML = \'对不起，当前浏览器暂不支持此功能！\'
    this.el.prepend(this.section);
    return
  }
  this.canvas.width = this.el.clientWidth;
  this.canvas.height = this.el.clientHeight;
  this.el.prepend(this.canvas);

  this.cxt = this.canvas.getContext(\'2d\');
  this.cxt.fillStyle = this.background;
  this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.height);
  this.cxt.strokeStyle = this.color;
  this.cxt.lineWidth = this.lineWidth;
  this.cxt.lineCap = \'round\'; // 线条末端添加圆形线帽，减少线条的生硬感
  this.cxt.lineJoin = \'round\'; // 线条交汇时为原型边角
  // 利用阴影，消除锯齿
  this.cxt.shadowBlur = 1;
  this.cxt.shadowColor = \'#000\';

  // 开始绘制
  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 (e) {
    this.cxt.closePath();
  }.bind(this), false);

  // 清除画布
  this.clearEl.addEventListener(\'click\', function () {
    this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }.bind(this), false);

  // 保存图片
  this.saveEl.addEventListener(\'click\', function () {
    var imgBase64 = this.canvas.toDataURL();
    var imgPng = this.canvas.toDataURL(\'image/png\');
    var imgJpg = this.canvas.toDataURL(\'image/jpeg\', 0.8);
    console.log(imgPng, imgJpg);
  }.bind(this), false);
}

参考

• 如何用canvas实现在线签名的示例代码
• h5 利用canvas手写签名并保存