前端使用Canvas实现网页电子签名(兼容移动端和PC端)

码农键盘上的梦

已于 2024-11-12 14:44:53 修改

阅读量419

点赞数 2

分类专栏： JavaScript 文章标签：前端 javascript

于 2024-11-12 14:44:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44848480/article/details/143713082

版权

JavaScript 专栏收录该内容

51 篇文章

订阅专栏

实现效果：

要使用Canvas实现移动端网页电子签名，可以按照以下步骤：

在HTML文件中创建一个Canvas元素，并设置其宽度和高度，以适配移动设备的屏幕大小。

// 创建一个canvas元素
let canvas = document.createElement("canvas");
// 设置canvas元素的宽度和高度
canvas.width = 300;
canvas.height = 200;

在JavaScript文件中获取Canvas元素，并获取其上下文对象。

let ctx = canvas.getContext('2d');

设置绘制路径的样式，包括颜色、宽度等。

ctx.strokeStyle = '#000000'; // 设置绘制线条的颜色为黑色
ctx.lineWidth = 2; // 设置绘制线条的宽度为2像素

监听移动设备的触摸事件，在触摸事件的回调函数中获取触摸点的坐标，并使用Canvas绘制路径。

var isDrawing = false; // 是否正在绘制路径

canvas.addEventListener('touchstart', function(e) {
  isDrawing = true;
  var touch = e.touches[0];
  var x = touch.pageX - canvas.offsetLeft;
  var y = touch.pageY - canvas.offsetTop;
  ctx.beginPath(); // 开始绘制路径
  ctx.moveTo(x, y); // 移动到起始点
});

canvas.addEventListener('touchmove', function(e) {
  if (isDrawing) {
    var touch = e.touches[0];
    var x = touch.pageX - canvas.offsetLeft;
    var y = touch.pageY - canvas.offsetTop;
    ctx.lineTo(x, y); // 绘制直线到当前点
    ctx.stroke(); // 绘制路径
  }
});

canvas.addEventListener('touchend', function(e) {
  isDrawing = false;
});

可以添加其他功能，如清除画布、保存签名等。

const startDrawing = (e) => {
  isDrawing = true;
  const { clientX, clientY } = e.touches ? e.touches[0] : e;
  const x = clientX - canvas.offsetLeft;
  const y = clientY - canvas.offsetTop;
  ctx.beginPath(); // 开始绘制路径
  ctx.moveTo(x, y); // 移动到起始点
};

const draw = (e) => {
  if (isDrawing) {
    const { clientX, clientY } = e.touches ? e.touches[0] : e;
    const x = clientX - canvas.offsetLeft;
    const y = clientY - canvas.offsetTop;
    ctx.lineTo(x, y); // 绘制直线到当前点
    ctx.stroke(); // 绘制路径
  }
};

const stopDrawing = () => {
  isDrawing = false;
};

// 添加触摸事件
canvas.addEventListener("touchstart", startDrawing);
canvas.addEventListener("touchmove", draw);
canvas.addEventListener("touchend", stopDrawing);

// 添加鼠标事件
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);

以上就是使用Canvas实现移动端网页电子签名的基本步骤。你可以根据自己的需求进行进一步的扩展和优化。

下面给出完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas头像</title>
  </head>
  <body>
    <button onclick="saveSignature()">保存</button>
    <button onclick="clearCanvas()">清除</button>
    <script>
      let canvas = null;
      let ctx = null;
      let isDrawing = false; // 是否正在绘制路径

      (function initCanvas() {
        // 创建一个canvas元素
        canvas = document.createElement("canvas");
        // 设置canvas元素的宽度和高度
        canvas.width = 300;
        canvas.height = 200;
        // 将canvas元素添加到body元素中
        document.body.appendChild(canvas);
        // 获取canvas元素的上下文对象
        ctx = canvas.getContext("2d");

        ctx.strokeStyle = "#000000"; // 设置绘制线条的颜色为黑色
        ctx.lineWidth = 2; // 设置绘制线条的宽度为2像素
        const startDrawing = (e) => {
          isDrawing = true;
          const { clientX, clientY } = e.touches ? e.touches[0] : e;
          const x = clientX - canvas.offsetLeft;
          const y = clientY - canvas.offsetTop;
          ctx.beginPath(); // 开始绘制路径
          ctx.moveTo(x, y); // 移动到起始点
        };

        const draw = (e) => {
          if (isDrawing) {
            const { clientX, clientY } = e.touches ? e.touches[0] : e;
            const x = clientX - canvas.offsetLeft;
            const y = clientY - canvas.offsetTop;
            ctx.lineTo(x, y); // 绘制直线到当前点
            ctx.stroke(); // 绘制路径
          }
        };

        const stopDrawing = () => {
          isDrawing = false;
        };

        // 添加触摸事件
        canvas.addEventListener("touchstart", startDrawing);
        canvas.addEventListener("touchmove", draw);
        canvas.addEventListener("touchend", stopDrawing);

        // 添加鼠标事件
        canvas.addEventListener("mousedown", startDrawing);
        canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("mouseup", stopDrawing);
      })();

      // 清除画布
      function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

      // 保存签名为图片
      function saveSignature() {
        const imageData = canvas.toDataURL(); // 将Canvas内容转换为图片数据
        const link = document.createElement("a");
        link.href = imageData;
        link.download = "signature.png"; // 设置下载图片的文件名
        link.click(); // 模拟点击下载链接
      }
    </script>
  </body>
</html>