需要用于绘制签名的插件[关闭]

2 回答

• 2

  使用context.quadraticCurveTo()MDN可以实现更平滑自然的'curvy'线

  只是，quadraticCurveTo只能有一个恒定的厚度，所以，通过使用下面你不能轻易改变线条来制作阴影笔角和压力效果 .

  var board = {
    width: 560,
    height: 190
  };
  var pen = {
    color: "rgb(0, 0, 0)",
    size: 2
  };
  var pts = [];
  var isDown = false;
  var isTouch = false;
  var cvs = document.getElementById('canvas');
  var ctx = cvs.getContext('2d');
  var cvs2 = document.createElement('canvas');
  var ctx2 = cvs2.getContext('2d');
  
  cvs.width = cvs2.width = board.width;
  cvs.height = cvs2.height = board.height;
  
  function penDown(ev) {
    ev.preventDefault();
    isTouch = ev.type === "touchstart";
    ev = isTouch ? ev.touches[0] : ev;
    isDown = true;
    pts.push({
      x: ev.clientX,
      y: ev.clientY
    });
    drawPoints();
  }
  
  function penMove(ev) {
    ev.preventDefault();
    ev = isTouch ? ev.touches[0] : ev;
    if (isDown) {
      ctx.clearRect(0, 0, board.width, board.height);
      ctx.drawImage(cvs2, 0, 0); // Draw to inmemory cvs2
      pts.push({
        x: ev.clientX,
        y: ev.clientY
      });
      drawPoints();
    }
  }
  
  function penUp(ev) {
    ev.preventDefault();
    isDown = isTouch = false;
    pts = [];
    // Save state to in-memory cvs2
    ctx2.clearRect(0, 0, board.width, board.height);
    ctx2.drawImage(cvs, 0, 0);
  }
  
  function clear() {
    ctx.clearRect(0, 0, board.width, board.height);
    ctx2.clearRect(0, 0, board.width, board.height);
  }
  
  function drawPoints() {
    var i = 0;
    var i2 = pts.length > 1 ? 1 : 0;
    ctx.beginPath();
    ctx.lineWidth = pen.size;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.moveTo(pts[0].x, pts[0].y);
    for (; i < pts.length - i2; i++) {
      ctx.quadraticCurveTo(
        pts[i].x,
        pts[i].y,
        (pts[i].x + pts[i + i2].x) / 2,
        (pts[i].y + pts[i + i2].y) / 2
      );
    }
    ctx.strokeStyle = pen.color;
    ctx.stroke();
    ctx.closePath();
  }
  
  // EVENTS
  
  cvs.addEventListener('touchstart', penDown);
  cvs.addEventListener('touchmove', penMove);
  cvs.addEventListener('touchend', penUp);
  cvs.addEventListener('mousedown', penDown);
  cvs.addEventListener('mousemove', penMove);
  cvs.addEventListener('mouseup', penUp);
  document.getElementById("clear").addEventListener("click", clear);
  

  body {margin:0;}
  #canvas{display: block; box-shadow: inset 0 0 0 2px #ccc;}
  #clear {position: absolute; top:0; left: 0;}
  

  <canvas id='canvas'></canvas>
  <button id="clear">CLEAR</button>
  

  回复于 2024-05-06T22:52:44+08:00
• 4

  这是您正在寻找的jquery插件 .

  checkout JSignature

  下载jsignature插件并添加到您的页面 .

  回复于 2024-05-06T22:52:44+08:00