Canvas 绘图技术：如何实现签名板签名功能以及导出图片

原创

Front_Yue

修改于 2024-01-24 21:59:29

3743

修改于 2024-01-24 21:59:29

文章被收录于专栏：码艺坊码艺坊

前言

大家好，我是腾讯云开发者社区的 Front_Yue，本篇文章将带领大家学习利用Canvas实现签名板签名功能以及导出图片。

正文内容

一、Canvas 概述

Canvas 是 HTML5 中的一个重要特性，它允许我们使用 JavaScript 在网页上绘制图形和动画。Canvas 是一个矩形区域，我们可以在这个区域内使用 JavaScript 绘制各种图形，如线条、矩形、圆形、多边形等。Canvas 的绘图原理是通过 JavaScript 操作 Canvas 上下文对象（Context）来实现的。Canvas 上下文对象提供了各种方法和属性，用于绘制图形、设置样式、处理事件等。

二、Canvas 绘制签名板步骤

在实现将签名版上的签名并导出为图片的功能之前，我们先想一想如何在 Canvas 上绘制签名版。

我的思路是，签名版是一个可以在上面绘制签名的区域，我们可以通过鼠标或触摸屏幕来绘制签名。

而在 Canvas 上绘制签名版的关键是监听鼠标或触摸事件，并根据事件的坐标绘制签名。下面我将带领大家一步一步实现该功能。

1. 创建HTML模版

首先，我们需要创建一个 HTML 页面，包含一个 Canvas 元素和一个用于显示导出的图片的 <img> 元素。我们还需要添加一个“清除”按钮和一个“导出”按钮，用于清除画布和将签名版上的签名导出为图片。

<!DOCTYPE html>
<html>
<head>
 <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
 <canvas id="signatureCanvas" width="400" height="200"></canvas>
 <button onclick="clearCanvas()">清除</button>
 <button onclick="downloadSignature()">导出</button>
  <img id="signatureImage" width="400" height="200">
 <script src="signature.js"></script>
</body>
</html>

注意：以上模版代码只是参考示例，大家可以根据具体业务需求设定样式。

2.初始化Canvas

我们通过标签ID获取 Canvas 元素， Canvas 上下文对象，以及获取签名图片元素。然后设置绘制样式，包括笔触颜色和线条宽度，定义了一个 drawing 变量，用来记录当前是否正在绘制。初始值为 false，表示没有在绘制。

// 获取 Canvas 元素和 Canvas 上下文对象
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
// 获取签名图片元素
const signatureImage = document.getElementById('signatureImage');

// 设置绘制样式
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;

// 定义绘制状态
let drawing = false;

3. 监听鼠标mousedown事件

我们写一个监听鼠标的 mousedown 事件。当鼠标按下时，会将 drawing 变量设置为 true，表示开始绘制。然后使用 ctx.beginPath() 方法开始一个新的路径，以便绘制新的线条。

接着使用 ctx.moveTo() 方法将画笔移动到鼠标点击的位置，e.clientX 和 e.clientY 表示鼠标相对于浏览器窗口的坐标，而 canvas.offsetLeft 和 canvas.offsetTop 表示 Canvas 元素相对于浏览器窗口的左上角的偏移量。这样就可以将画笔移动到鼠标点击的位置了。

// 监听鼠标事件
canvas.addEventListener('mousedown', (e) => {
    drawing = true;
    // 开始绘制新路径
    ctx.beginPath();
    // 移动到鼠标位置
    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
});

4. 监听鼠标 mousemove 事件

当然，我们也需要监听鼠标的 mousemove 事件。当鼠标移动时，如果 drawing 变量的值为 false，则表示当前没有在绘制，直接返回。如果 drawing 变量的值为 true，则表示正在绘制，使用 ctx.lineTo() 方法将画笔移动到鼠标移动的位置，然后使用 ctx.stroke() 方法绘制路径。这样就可以实现随着鼠标移动不断绘制线条的效果。

canvas.addEventListener('mousemove', (e) => {
    if (!drawing) return;
    // 绘制直线到鼠标位置
    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    // 绘制路径
    ctx.stroke();
});

5. 监听鼠标 mouseup 事件

接着，为了绘制完毕，不在继续绘制，需要监听鼠标的 mouseup 事件。当鼠标松开时，将 drawing 变量设置为 false，表示绘制结束。

canvas.addEventListener('mouseup', () => {
    // 结束绘制
    drawing = false;
});

通过以上三个监听事件，这样就可以实现在鼠标按下时开始绘制，在鼠标松开时结束绘制的效果,下面是我的效果图，哈哈哈，有一点小丑。

6. 清除签名内容

我们定义一个clearCanvas事件，用于当用户点击清除按钮时，可以清楚画布内容。

// 定义清除画布的函数
function clearCanvas() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 清除签名图片
    signatureImage.src = '';
}

7. 导出签名为图片

我们定义了一个 downloadSignature() 函数，用于将签名版上的签名导出为图片。在这个函数中，我们使用 canvas.toDataURL() 方法将画布内容转换为 DataURL，然后创建一个下载链接，并触发点击事件以下载图片，同时将画布内容设置为 <img> 元素的 src 属性，以便在页面能够显示签名图片。

// 定义下载签名图片的函数
function downloadSignature() {
    // 将画布内容转换为 DataURL
    const dataURL = canvas.toDataURL('image/png');
    // 创建一个 <a> 元素
    const link = document.createElement('a');
    // 将 DataURL 赋值给 <a> 元素的 href 属性
    link.href = dataURL;
    // 设置下载的文件名
    link.download = 'signature.png';
    // 将签名图片元素的 src 属性设置为画布内容的 DataURL
    signatureImage.src = canvas.toDataURL('image/png');
    // 触发 <a> 元素的点击事件，以便下载图片
    link.click();
    
}

三、完整示例代码

下面是以上步骤的完整的示例代码，包括在 Canvas 上绘制签名版和将签名导出为图片的功能。大家可以将代码复制到 HTML 文件中，并在浏览器中运行，以查看效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="signatureCanvas" width="400" height="200"></canvas>
  <button onclick="clearCanvas()">清除</button>
  <button onclick="downloadSignature()">下载</button>
  <img id="signatureImage" width="400" height="200">
  <script>
    // 获取 Canvas 元素和 Canvas 上下文对象
    const canvas = document.getElementById('signatureCanvas');
    const ctx = canvas.getContext('2d');
    // 获取签名图片元素
    const signatureImage = document.getElementById('signatureImage');

    // 设置绘制样式
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;

    // 定义绘制状态
    let drawing = false;

    // 监听鼠标事件
    canvas.addEventListener('mousedown', (e) => {
      drawing = true;
      // 开始绘制新路径
      ctx.beginPath();
      // 移动到鼠标位置
      ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    });

    canvas.addEventListener('mousemove', (e) => {
      if (!drawing) return;
      // 绘制直线到鼠标位置
      ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
      // 绘制路径
      ctx.stroke();
    });

    canvas.addEventListener('mouseup', () => {
      // 结束绘制
      drawing = false;
    });

    // 定义清除画布的函数
    function clearCanvas() {
      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 清除签名图片
      signatureImage.src = '';
    }

    // 定义下载签名图片的函数
    function downloadSignature() {
      // 将画布内容转换为 DataURL
      const dataURL = canvas.toDataURL('image/png');
      // 创建一个 <a> 元素
      const link = document.createElement('a');
      // 将 DataURL 赋值给 <a> 元素的 href 属性
      link.href = dataURL;
      // 设置下载的文件名
      link.download = 'signature.png';
    // 将签名图片元素的 src 属性设置为画布内容的 DataURL
    signatureImage.src = canvas.toDataURL('image/png');
      // 触发 <a> 元素的点击事件，以便下载图片
      link.click();
    }
  </script>
</body>
</html>

总结

Canvas 绘图技术是 HTML5 中的一个重要特性，它允许我们使用 JavaScript 在网页上绘制图形和动画。Canvas 可以用于游戏开发、数据可视化、图像处理等领域。本文介绍了如何使用 Canvas 绘图技术实现签名板签名以及导出为图片的功能。希望通过以上内容，大家可以掌握 Canvas 的基本绘图原理和导出图片的方法，为以后的 Canvas 应用打下坚实的基础。

最后，感谢腾讯云开发者社区小伙伴的陪伴，如果你喜欢我的博客内容，认可我的观点和经验分享，请点赞、收藏和评论，这将是对我最大的鼓励和支持。同时，也欢迎大家提出宝贵的意见和建议，让我能够更好地改进和完善我的博客。谢谢！

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript