当前位置： 首页 > news >正文

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

news 2026/2/10 11:35:43

实现效果：



要使用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>

相关文章：

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

实现效果&#xff1a; 要使用Canvas实现移动端网页电子签名&#xff0c;可以按照以下步骤&#xff1a; 在HTML文件中创建一个Canvas元素&#xff0c;并设置其宽度和高度&#xff0c;以适配移动设备的屏幕大小。 // 创建一个canvas元素 let canvas document.createElement(&q…...

编程日记 2024/11/12 16:18:28

什么是OSTRPT报文？

OSTRPT&#xff08;Order Status Report&#xff09;是一种 EDI&#xff08;电子数据交换&#xff09;报文&#xff0c;用于在供应链管理中向采购商报告订单状态。这种报文通常由供应商发送给采购商&#xff0c;目的是告知订单的当前处理状态、预期交货时间、订单中的变化等信息…...

编程日记 2024/11/12 16:16:25

PICO+Unity MR空间锚点

官方链接&#xff1a;空间锚点 | PICO 开发者平台 注意&#xff1a;该功能只能打包成APK在PICO 4 Ultra上真机运行&#xff0c;无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上&#xff0c;勾选…...

编程日记 2024/11/12 16:15:23

electron 中 contextBridge 作用

1. 安全地实现渲染进程和主进程之间的通信 在 Electron 应用中&#xff0c;主进程和渲染进程是相互隔离的&#xff0c;这是为了安全和稳定性考虑。 然而&#xff0c;在很多情况下&#xff0c;渲染进程需要访问主进程中的某些功能&#xff0c;例如系统级别的操作或者一些应用级…...

编程日记 2024/11/12 16:14:21

15分钟学 Go 第 42 天：RESTful API设计

第42天&#xff1a;RESTful API设计 目标&#xff1a;理解RESTful API的设计原则 在现代Web开发中&#xff0c;RESTful API&#xff08;Representational State Transfer&#xff09;已经成为了标准的架构风格&#xff0c;用于实现客户端与服务器之间的通信。通过遵循REST的设…...

编程日记 2024/11/12 16:13:20

如何安全的中断一个运行中的线程？

文心快码进入3.0时代&#xff0c; 最新发布的代码问答、编码、Debug、单测、安全智能体&#xff0c; 分别在开发的设计、编码、构建、测试验证全流程通过AI赋能&#xff0c;让效率更高、效果更好。可以通过自然语言对话&#xff0c;独立为你完成一项编码任务。 &#x1f449;点…...

编程日记 2024/11/12 16:12:19

【121. 买卖股票的最佳时机】——贪心算法/动态规划

121. 买卖股票的最佳时机 一、题目难度 简单 三、题目描述 给定一个数组 prices&#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择某一天买入这只股票&#xff0c;并选择在未来的某一个不同的日子卖出该股票。设计一个算法来计算你所能获…...

编程日记 2024/11/12 16:11:17

LLMs之Calculate：利用大语言模型技术基于文本内容实现数字计算能力的简介、常用方法、代码实现之详细攻略

LLMs之Calculate：利用大语言模型技术基于文本内容实现数字计算能力的简介、常用方法、代码实现之详细攻略 导读：在基于大语言模型（LLM）技术实现数字计算能力的背景下，文本内容的理解和计算过程涉及多个领域的交叉技术，包括自然语言处理（NLP）、机器学习、以及数值计算。…...

编程日记 2024/11/12 16:09:14

LeetCode题练习与总结：判断子序列--392

一、题目描述 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的一…...

编程日记 2024/11/12 16:06:11

json数据结构的转换

# json可用于赌徒与原件数据的转换&#xff08;json以字符串的形式储存数据&#xff0c;在通过json进行两种语言的转换时&#xff0c;应先将数据类型转换成列表或字典&#xff0c;再由列表或字典转换成json字符串&#xff0c;最后由json字符串转换成另一种语言的列表或字典数据…...

编程日记 2024/11/12 16:05:10

mysql删除语句：@Update(“TRUNCATE TABLE employee“)讲解

这个 SQL 语句&#xff1a; TRUNCATE TABLE employee是一个 SQL DDL&#xff08;数据定义语言&#xff09; 操作&#xff0c;用于清空数据库表中的所有记录&#xff0c;但不会删除表结构&#xff08;即列和索引等&#xff09;。 逐部分解释&#xff1a; TRUNCATE&#xff1a;…...

编程日记 2024/11/12 16:04:08

如何修改浏览器指纹？

网络安全日益重要&#xff0c;我们的上网行为变得越来越容易被追踪和分析。其中&#xff0c;浏览器指纹就是一种强大的技术手段&#xff0c;它可以说是你上网的身份象征。 一、浏览器指纹是什么 浏览器指纹是网站和在线平台用来收集关于你的浏览器、设备和网络的详细信息的一…...

编程日记 2024/11/12 16:03:02

实现3D热力图

实现思路 首先是需要用canvas绘制一个2D的热力图&#xff0c;如果你还不会&#xff0c;请看json绘制热力图。使用Threejs中的canvas贴图&#xff0c;将贴图贴在PlaneGeometry平面上。使用着色器材质&#xff0c;更具json中的数据让平面模型 拔地而起。使用Threejs内置的TWEEN&…...

编程日记 2024/11/12 16:01:00

GEE ui界面实现：用户自画多边形， 按面积比例在多边形中自动生成样点，导出多边形和样点shp，以及删除上一组多边形和样点（有视频效果展示）

零、背景 这几天在选样点&#xff0c;发现GEE有强大的ui功能&#xff0c;于是应用在我的工作上。 下述代码实现了几个功能&#xff1a; ①用户可以自己勾勒多边形&#xff0c;随后程序会按面积比例在多边形中自动生成样点&#xff0c;同时根据改多边形的区域生成区域平均月N…...

编程日记 2024/11/12 15:59:59

React diff算法和Vue diff算法的主要区别

React和Vue都是流行的前端框架&#xff0c;它们各自实现了diff算法来优化虚拟DOM的更新过程。以下是React diff算法和Vue diff算法的主要区别&#xff1a; 1. diff策略 React diff算法&#xff1a; React的diff算法主要采用了同层级比较的策略&#xff0c;即它不会跨层级比较节…...

编程日记 2024/11/12 15:58:57

WSL 2 中 FastReport 与 FastCube 的设置方法与优化策略

软件开发人员长期以来一直在思考这个问题&#xff1a;“我们如何才能直接在 Windows 中运行 Linux 应用程序&#xff0c;而无需使用单独的虚拟机&#xff1f;” WSL 技术为这个问题提供了一个可能的答案。WSL 的历史始于 2016 年。当时&#xff0c;其实现涉及使用 Windows 内核…...

编程日记 2024/11/12 15:57:56

《线性代数》学习笔记

列向量无关 上个星期继续学线性代数&#xff0c;一个矩阵&#xff0c;如何判断它是的列向量有几个是线性无关呢&#xff1f;其实有好几个方法。第一个就是一个一个判断。 先选定一个&#xff0c;然后看下这两个&#xff0c;怎么看呢&#xff1f;如果两个列向量线性相关&#…...

编程日记 2024/11/12 15:56:55

Redis三种集群模式：主从模式、哨兵模式和Cluster模式

目录标题 1、背景及介绍2、 Redis 主从复制2.1、主从复制特点2.2、Redis主从复制原理2.3 PSYNC 工作原理2.3.1、启动或重连判断&#xff1a;2.3.2、第一次同步处理&#xff1a;2.3.3、断线重连处理&#xff1a;2.3.4、主节点响应2.3.5、全量同步触发条件&#xff1a;2.3.6、复制…...

编程日记 2024/11/12 15:53:52

CDH大数据平台部署

二、CDH简介 全称Cloudera’s Distribution Including Apache Hadoop。 hadoop的版本 (Apache、CDH、Hotonworks版本) 在公司中一般使用cdh多一些&#xff08;收费的&#xff09;、也有公司使用阿里云大数据平台、微软的大数据平台。 国内也有一些平台&#xff1a;星环大数…...

编程日记 2024/11/12 15:52:51

7.4、实验四：RIPv2 认证和触发式更新

源文件 一、引言&#xff1a;为什么要认证和采用触发式更新&#xff1f; 1. RIP v2 认证 RIP&#xff08;Routing Information Protocol&#xff09;版本 2 添加了认证功能&#xff0c;以提高网络的安全性。认证的作用主要包括以下几点&#xff1a; 防止路由欺骗 RIP v1 是不…...

编程日记 2024/11/12 15:51:50

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09