js簽字板 - 簡書

qianzi.gif
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>簽名板(支持移動端)</title>
</head>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }

  #canvas {
    /*width: 100%;*/
    display: block;
    border: 1px solid red;
    margin: 10px auto;
  }

  #clear,
  #clear1,
  #save {
    margin: 0 auto;
    display: inline-block;
    padding: 5px 10px;
    width: 50px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #eee;
    background: #e1e1e1;
    border-radius: 10px;
    text-align: center;
    margin: 20px auto;
    cursor: pointer;
  }
</style>

<body data-ext-version="1.4.2">
  <canvas id="canvas" width="600" height="600">
    您的瀏覽器不支持canvas技術(shù),請升級瀏覽器!
  </canvas>
  <div style="text-align: center">
    <span id="clear">清空</span>
    <span id="save">保存</span>
  </div>
</body>
<script type="text/javascript">
  function WriteFont(id, options) {
    var self = this;
    this.canvas = document.getElementById(id);
    var obj = {
      canvas: this.canvas,
      context: this.canvas.getContext("2d"),
      isWrite: false, //是否開始
      lastWriteTime: -1,
      lastWriteSpeed: 0,
      lastWriteWidth: 0,
      canvasWidth: 600, //canvas寬高
      canvasHeight: 600,
      isShowBorder: true, //是否顯示網(wǎng)格
      bgColor: '#fff', //背景色
      borderWidth: 2, // 網(wǎng)格線寬度
      borderColor: "#fff", //網(wǎng)格顏色
      lastPoint: {}, //
      writeWidth: 2, //基礎(chǔ)軌跡寬度
      maxWriteWidth: 30, // 寫字模式最大線寬
      minWriteWidth: 1, // 寫字模式最小線寬
      writeColor: '#000', // 軌跡顏色
      isWriteName: false //簽名模式
    }

    for (var name in options) {
      obj[name] = options[name];
    }

    /**
    * 軌跡寬度
    */
    this.setLineWidth = function () {
      var nowTime = new Date().getTime();
      var diffTime = nowTime - obj.lastWriteTime;
      obj.lastWriteTime = nowTime;
      var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
      if (returnNum < obj.minWriteWidth) {
        returnNum = obj.minWriteWidth;
      } else if (returnNum > obj.maxWriteWidth) {
        returnNum = obj.maxWriteWidth;
      }

      returnNum = returnNum.toFixed(2);
      //寫字模式和簽名模式
      if (obj.isWriteName) {
        obj.context.lineWidth = obj.writeWidth;
      } else {
        obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
      }
    }

    /**
    * 繪制軌跡
    */
    this.writing = function (point) {
      obj.context.beginPath();
      obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
      obj.context.lineTo(point.x, point.y);
      self.setLineWidth();
      obj.context.stroke();
      obj.lastPoint = point;
      obj.context.closePath();
    }

    /**
    * 軌跡樣式
    */
    this.writeContextStyle = function () {
      obj.context.beginPath();
      obj.context.strokeStyle = obj.writeColor;
      obj.context.lineCap = 'round';
      obj.context.lineJoin = "round";
    }

    /**
    * 寫開始
    */
    this.writeBegin = function (point) {
      obj.isWrite = true;
      obj.lastWriteTime = new Date().getTime();
      obj.lastPoint = point;
      self.writeContextStyle();
    }

    /**
    * 寫結(jié)束
    */
    this.writeEnd = function () {
      obj.isWrite = false;
    }

    /**
    * 清空畫板
    */
    this.canvasClear = function () {
      obj.context.save();
      obj.context.strokeStyle = '#fff';
      obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
      if (obj.isShowBorder && !obj.isWriteName) {
        obj.context.beginPath();
        var size = obj.borderWidth / 2;
        //畫外面的框
        obj.context.moveTo(size, size);
        obj.context.lineTo(obj.canvasWidth - size, size);
        obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
        obj.context.lineTo(size, obj.canvasHeight - size);
        obj.context.closePath();
        obj.context.lineWidth = obj.borderWidth;
        obj.context.strokeStyle = obj.borderColor;
        obj.context.stroke();
        //畫里面的框
        obj.context.moveTo(0, 0);
        obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
        obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
        obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
        obj.context.lineTo(0, obj.canvasHeight / 2);
        obj.context.lineTo(0, obj.canvasHeight);
        obj.context.lineTo(obj.canvasWidth, 0);
        obj.context.lineTo(obj.canvasWidth / 2, 0);
        obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
        obj.context.stroke();

      }
      obj.context.restore();
    }

    /**
    * 保存圖片 格式base64
    */
    this.saveAsImg = function () {
      var image = new Image();
      image.src = this.canvas.toDataURL("image/png");
      if (image.src == this.emptyCanvas) {
        alert('請先書寫')
      } else {
        console.log('提交的內(nèi)容===>', image.src)
      }
    };

    /**
    * 初始化畫板
    */
    this.canvasInit = function () {
      this.canvas.width = obj.canvasWidth;
      this.canvas.height = obj.canvasHeight;
      this.emptyCanvas = this.canvas.toDataURL("image/png");
    }

    /**======================事件綁定===========================**/

    this.canvas.addEventListener('mousedown', function (e) {
      var point = {
        x: e.offsetX || e.clientX,
        y: e.offsetY || e.clientY
      };
      self.writeBegin(point);
    });

    this.canvas.addEventListener('mouseup', function (e) {
      var point = {
        x: e.offsetX,
        y: e.offsetY
      };
      self.writeEnd(point);
    });

    this.canvas.addEventListener('mouseleave', function (e) {
      var point = {
        x: e.offsetX,
        y: e.offsetY
      };
      self.writeEnd(point);
    });

    this.canvas.addEventListener('mousemove', function (e) {
      if (obj.isWrite) {
        var point = {
          x: e.offsetX,
          y: e.offsetY
        };

        self.writing(point);
      }
    });

    //移動端
    this.canvas.addEventListener('touchstart', function (e) {
      var touch = e.targetTouches[0];
      var point = {
        x: touch.pageX || touch.clientX,
        y: touch.pageY || touch.clientY
      };
      self.writeBegin(point);
    });
    this.canvas.addEventListener('touchend', function (e) {
      var touch = e.changedTouches[0];
      var point = {
        x: touch.pageX,
        y: touch.pageY
      };
      self.writeEnd(point);
    });
    this.canvas.addEventListener('touchmove', function (e) {
      var touch = e.targetTouches[0];
      var point = {
        x: touch.pageX,
        y: touch.pageY
      };
      self.writeEnd(point);
    });
    this.canvas.addEventListener('touchmove', function (e) {
      var touch = e.targetTouches[0];
      var point = {
        x: touch.pageX,
        y: touch.pageY
      };
      self.writing(point);
    });

    this.canvasInit();
    this.canvasClear();

    this.option = obj;
    obj.control = {
      clearCanvas: self.canvasClear
    };
  }

  /**
  * 初始化調(diào)用
  * 設(shè)置參數(shù)
  */
  var writeCanvas = new WriteFont('canvas', {
    borderWidth: 10,
    writeWidth: 3,
    borderColor: '#ff6666',
    isWriteName: true //簽名模式
  });

  document.getElementById('clear').onclick = function () {
    writeCanvas.option.control.clearCanvas();
  };

  document.getElementById('save').onclick = function () {
    writeCanvas.saveAsImg()
  };
</script>

</html>