Canvas实现手写签名

效果图：

HTNL部分代码：

<div style="margin: 20px auto; text-align: center">手写签名</div>
<canvas
  id="canvasbox"
  width="500"
  height="250"
  style="border: 1px solid #c1c2c3; margin: 20px auto; display: block"
></canvas>
<div class="btn" style="margin: 0 auto; text-align: center">
  <button id="savebtn">保存</button>
  <button id="clearbtn">清空</button>
</div>

JS部分代码：

var canvasbox = document.getElementById("canvasbox");
var ctx = canvasbox.getContext("2d");
var iscanvas = false;
var offsetX = "";
var offsetY = "";
// 初始化背景颜色
ctx.fillStyle = "#f0f0f0"; // 设置背景颜色为浅灰色
ctx.fillRect(0, 0, canvasbox.width, canvasbox.height);

canvasbox.addEventListener("mousedown", function (e) {
  iscanvas = true;
  offsetX = e.offsetX;
  offsetY = e.offsetY;
});
canvasbox.addEventListener("mousemove", function (e) {
  if (iscanvas) {
    ctx.beginPath();
    ctx.moveTo(offsetX, offsetY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#000"; // 设置签名笔迹的颜色
    ctx.stroke();
    offsetX = e.offsetX;
    offsetY = e.offsetY;
  }
});
canvasbox.addEventListener("mouseup", function () {
  iscanvas = false;
});
canvasbox.addEventListener("mouseleave", function () {
  iscanvas = false;
});
var clearbtn = document.getElementById("clearbtn");
clearbtn.addEventListener("click", function () {
  ctx.clearRect(0, 0, canvasbox.width, canvasbox.height);
});
var savebtn = document.getElementById("savebtn");
savebtn.addEventListener("click", function () {
  downLoad(saveAsPNG(canvasbox));
});
function downLoad(url) {
  var img = document.createElement("a");
  img.download = parseInt(Math.random() * 1000000); // 设置下载的文件名，默认是'下载'
  img.href = url;
  img.style.display = "none";
  document.body.appendChild(img);
  img.click();
  img.remove(); // 下载之后把创建的元素删除
}
// 保存成png格式的图片
function saveAsPNG(canvas) {
  return canvas.toDataURL("image/png");
}

// 保存成jpg格式的图片
function saveAsJPG(canvas) {
  return canvas.toDataURL("image/jpeg");
}

如果要将 <canvas> 的背景设置为图片，您可以先使用 drawImage 方法将图片绘制到画布上，然后再开始绘制签名。

var backgroundImage = new Image();
backgroundImage.src = 'background.jpg'; // 替换为你的背景图片路径
backgroundImage.onload = function() {
    // 在图片加载完成后绘制到画布上
    ctx.drawImage(backgroundImage, 0, 0, canvasbox.width, canvasbox.height);
};

在清空画布的事件中，添加了代码来重新绘制背景图片：

ctx.clearRect(0, 0, canvasbox.width, canvasbox.height);
// 重新绘制背景图片
backgroundImage.onload = function() {
    ctx.drawImage(backgroundImage, 0, 0, canvasbox.width, canvasbox.height);
};
// 如果图片已经加载，可以直接绘制
if (backgroundImage.complete) {
    ctx.drawImage(backgroundImage, 0, 0, canvasbox.width, canvasbox.height);
}

使用图片背景后的效果图：