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

【JavaScript】前端实现电子签名：

news 2026/4/1 12:20:56

文章目录

        • 一、效果:
        • 二、实现:
        • 三、扩展

一、效果:

在这里插入图片描述
在这里插入图片描述

二、实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}</style>
</head>
<body><canvas></canvas><div><button onclick="cancel()">取消</button><button onclick="save()">保存</button></div>
</body>
<script>// 配置内容const config = {width: 400, // 宽度height: 200, // 高度lineWidth: 5, // 线宽strokeStyle: 'red', // 线条颜色lineCap: 'round', // 设置线条两端圆角lineJoin: 'round', // 线条交汇处圆角}// 获取canvas 实例const canvas = document.querySelector('canvas')// 设置宽高canvas.width = config.widthcanvas.height = config.height// 设置一个边框canvas.style.border = '1px solid #000'// 创建上下文const ctx = canvas.getContext('2d')// 设置填充背景色ctx.fillStyle = 'transparent'// 绘制填充矩形ctx.fillRect(0, // x 轴起始绘制位置0, // y 轴起始绘制位置config.width, // 宽度config.height // 高度);// 保存上次绘制的 坐标及偏移量const client = {offsetX: 0, // 偏移量offsetY: 0,endX: 0, // 坐标endY: 0}// 判断是否为移动端const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))// 初始化const init = event => {// 获取偏移量及坐标const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event // 修改上次的偏移量及坐标client.offsetX = offsetXclient.offsetY = offsetYclient.endX = pageXclient.endY = pageY// 清除以上一次 beginPath 之后的所有路径，进行绘制ctx.beginPath()// 根据配置文件设置相应配置ctx.lineWidth = config.lineWidthctx.strokeStyle = config.strokeStylectx.lineCap = config.lineCapctx.lineJoin = config.lineJoin// 设置画线起始点位ctx.moveTo(client.endX, client.endY)// 监听 鼠标移动或手势移动window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)}// 绘制const draw = event => {// 获取当前坐标点位const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event// 修改最后一次绘制的坐标点client.endX = pageXclient.endY = pageY// 根据坐标点位移动添加线条ctx.lineTo(pageX , pageY )// 绘制ctx.stroke()}// 结束绘制const cloaseDraw = () => {// 结束绘制ctx.closePath()// 移除鼠标移动或手势移动监听器window.removeEventListener("mousemove", draw)}// 创建鼠标/手势按下监听器window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)// 创建鼠标/手势 弹起/离开 监听器window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)// 取消-清空画布const cancel = () => {// 清空当前画布上的所有绘制内容ctx.clearRect(0, 0, config.width, config.height)}// 保存-将画布内容保存为图片const save = () => {// 将canvas上的内容转成blob流canvas.toBlob(blob => {console.log(blob,URL.createObjectURL(blob))// 获取当前时间并转成字符串，用来当做文件名const date = Date.now().toString()// 创建一个 a 标签const a = document.createElement('a')// 设置 a 标签的下载文件名a.download = `${date}.png`// 设置 a 标签的跳转路径为 文件流地址a.href = URL.createObjectURL(blob)// 手动触发 a 标签的点击事件a.click()// 移除 a 标签a.remove()})}
</script>
</html>

三、扩展

【各内核和浏览器支持情况】
Mozilla 程序从 Gecko 1.8 (Firefox 1.5 (en-US)) 开始支持canvas。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持canvas ，更旧版本的 IE 中，页面可以通过引入 Google 的 Explorer Canvas项目中的脚本来获得canvas支持。Google Chrome 和 Opera 9+ 也支持 canvas。

【小程序中提示】
在小程序中我们如果需呀实现的话，也是同样的原理哦，只是我们需要将创建实例和上下文的Api进行修改，因为小程序中是没有dom，既然没有dom，哪来的操作dom这个操作呢。

如果是uni-app则需要使用uni.createCanvasContext进行上下文创建
【uni.createCanvasContext】 https://uniapp.dcloud.net.cn/api/canvas/createCanvasContext.html

如果是原生微信小程序则使用wx.createCanvasContext进行创建（2.9.0）之后的库不支持
【wx.createCanvasContext】 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html

【canvas】 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

相关文章：

【JavaScript】前端实现电子签名：

文章目录一、效果:二、实现:三、扩展一、效果: 二、实现: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vie…...

编程日记 2023/2/25 0:01:27

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Feb 2023)

Windows 11, version 22H2&#xff0c;2023 年 2 月 更新 请访问原文链接&#xff1a;https://sysin.org/blog/windows-11/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;www.sysin.org 全新推出 Windows 11 全新 Windows 体验&#x…...

编程日记 2023/2/25 0:00:15

【java】Spring Cloud --Spring Cloud Alibaba 教程

文章目录Spring Cloud Alibaba是什么Spring Cloud AlibabaSpring Cloud Alibaba 组件Spring Cloud Alibaba 的应用场景Spring Cloud 两代实现组件对比Spring Cloud Alibaba 版本依赖Spring Cloud Alibaba 组件版本关系Spring Cloud Alibaba NacosNacos 的特性服务发现服务健康监…...

编程日记 2023/2/24 23:58:54

通过操作Cortex-A7核，串口输入相应的命令，控制LED灯进行工作增加编程要求

2.编程要求&#xff1a; 1&#xff09;结构体封装 typedef struct{ char* cmd_arr; //命令行字符串 gpio_t* gpiox;//GPIO组号 unsigned int pin; //引脚编号 status_t status; //LED灯状态 void(*gpio_write_pin)(gpio_t* gpiox,unsigned int pin,status_t status); }cmd_t; 2…...

编程日记 2023/2/24 23:57:39

银行家算法

银行家算法 银行家算法是一种用来避免操作系统死锁出现的有效算法&#xff0c;所以在引入银行家算法的解释之前&#xff0c;有必要简单介绍一下死锁的概念。 一、死锁 死锁&#xff1a;是指两个或两个以上的进程在执行过程中&#xff0c;由于竞争资源或者由于彼此通信而造成…...

编程日记 2023/2/24 23:56:29

181、【动态规划】leetcode ——72. 编辑距离（C++版本）

题目描述 原题链接&#xff1a;72. 编辑距离 解题思路 动态规划五步曲&#xff1a; &#xff08;1&#xff09;dp[i][j]含义&#xff1a; 以word1[i - 1]和word2[j - 1]结尾子串&#xff0c;经过最少次增删改后&#xff0c;可让word1变为word2的步数。dp中的i对应word1中的i…...

编程日记 2023/2/24 23:55:18

mysql 中关于慢查询日志

慢查询日志 慢查询日志主要用来记录执行时间超过设置的某个时长的SQL语句&#xff0c;能够帮助数据库维护人员找出执行时间比较长、执行效率比较低的SQL语句&#xff0c;并对这些SQL语句进行针对性优化。 开启慢查询 可以在 my.cnf 文件或者 my.ini 文件中配置开启慢查询日志…...

编程日记 2023/2/24 23:53:58

程序员必备的软技能-金字塔原理拆解（上）

原书 290千字&#xff0c;本文预计 14千字&#xff0c;拆解比 20&#xff1a;1&#xff0c;预计阅读时长 15分钟序言日常工作中&#xff0c;常常因为思维、表达方式不对产生不想要的结果&#xff1a;写了一个小时的周报&#xff0c;领导却不满意&#xff1f;跟团队讲了半天自己…...

编程日记 2023/2/24 23:52:48

关于我利用python开发的PC端标注软件及目标检测软件

如何利用python快速开发PC端目标检测及数据标注软件概述开发软件背景开发第一步&#xff1a;功能需求分析开发第二步&#xff1a; 前端分区设计开发第三步&#xff1a;功能开发开发第四步&#xff1a;程序功能的打包与检查开发第五步&#xff1a;程序的反馈与改善一个例子的展示…...

编程日记 2023/2/24 23:51:30

Git导出增量包的操作步骤

前言在项目开发部署中&#xff0c;通常是将一个Git项目全量打包发布&#xff0c;但有的场景只需要导出有变更的那部分文件&#xff0c;增量发布&#xff0c;此时就需要使用Git导出增量包了。一、查看提交记录拿到提交ID码①例如使用的gitlab使用方法参考下图(一目了然) 【推荐】…...

编程日记 2023/2/24 23:50:06

JavaWeb--JavaScript

JavaScript1 JavaScript简介2 JavaScript引入方式2.1 内部脚本2.2 外部脚本3 JavaScript基础语法3.1 书写语法3.2 输出语句3.3 变量3.4 数据类型3.5 运算符3.5.1 \\ 和 区别3.5.2 类型转换3.6 流程控制语句3.6.1 if 语句3.6.2 switch 语句3.6.3 for 循环语句3.6.4 while 循环语…...

编程日记 2023/2/24 23:48:55

mars3d加载建筑物白膜及简单建筑物样式

首先需要拥有shp格式的数据。可以通过水经微图下载&#xff0c;注意此软件是付费的将shp格式的数据处理为切片数据&#xff0c;可以使用cesiumlab处理完成得到json数据就可以在mars3d中加载了 function init() { // 判断webgl支持 if (!mars3d.Util.webglreport()) { …...

编程日记 2023/2/24 23:47:35

数据结构之顺序表

本章重点&#xff1a; 1.线性表 2.顺序表 3.链表 4.顺序表和链表的区别和联系 目录 1.线性表 2.顺序表 2.1概念及结构 2.2接口实现 2.2.1 SeqList.h 2.2.2 SeqList.c 2.3数组相关面试题 2.3.1移除元素 2.3.2删除有序数组中的重复项 ​编辑 2.3.3合并两个有序数组…...

编程日记 2023/2/24 23:46:27

【数据挖掘实战】——家用电器用户行为分析及事件识别

项目地址&#xff1a;Datamining_project: 数据挖掘实战项目代码 目录 一、背景和挖掘目标 1、问题背景 2、原始数据 3、挖掘目标 二、分析方法与过程 1、初步分析 2、总体流程 第一步&#xff1a;数据抽取 第二步&#xff1a;探索分析 第三步&#xff1a;数据的预处…...

编程日记 2023/2/24 23:45:14

肠道核心菌属——双歧杆菌属，了解并拥有它

双歧杆菌 双歧杆菌属&#xff08;Bifidobacterium&#xff09;是放线菌门严格厌氧的革兰氏阳性多形性杆状细菌。末端常常分叉&#xff0c;故名双歧杆菌。是人和动物肠道的重要核心菌群和有益生理菌群&#xff0c;也是母乳喂养婴儿中发现的第二大菌。 肥胖、糖尿病和过敏等各种疾…...

编程日记 2023/2/24 23:44:02

Python 之 Pandas 生成时间戳范围、Pandas 的时期函数 Period() 和时间序列 - 重采样 resample

文章目录一、生成时间戳范围1. 指定值2. 指定开始日期并设置期间数3. 频率 freq4. closed二、Pandas 的时期函数 Period()三、时间序列 - 重采样 resample在开始之前&#xff0c;我们先导入 numpy 和 pandas 库&#xff0c;同时导入 python 内置的模块。 import pandas as pd​…...

编程日记 2023/2/24 23:42:52

利用Python和Sprak求曲线与X轴上方的面积

有n组标本(1, 2, 3, 4), 每组由m个( , , ...)元素( , )组成(m值不定), . 各组样本的分布 曲线如下图所示. 通过程序近似实现各曲线与oc, cd直线围成的⾯积. 思路 可以将图像分成若干个梯形&#xff0c;每个梯形的底边长为(Xn1 - Xn-1)&#xff0c;面积为矩形的一半&#xff0c…...

编程日记 2023/2/24 23:41:40

利用机器学习(mediapipe)，进行人手的21个3D手关节坐标检测

感知手的形状和动作的能力可能是在各种技术领域和平台上改善用户体验的重要组成部分。例如，它可以构成手语理解和手势控制的基础，并且还可以在增强现实中将数字内容和信息覆盖在物理世界之上。虽然自然而然地出现在人们手中，但是强大的实时手感知力无疑是一项具有挑战性的计…...

编程日记 2023/2/24 23:40:20

【添砖java】谁说编程第一步是hello world

编程第一步明明是下载编译器和配置环境&#xff08;小声逼逼&#xff09;。 Windows下的java环境安装&#xff1a; java的安装包分为两类&#xff0c;一类是JRE&#xff08;Java Runtime Environmental&#xff09;&#xff0c;是一个独立的java运行环境&#xff1b;一类是JDK…...

编程日记 2023/2/24 23:38:01

el-table大数据量渲染卡顿问题

1、场景描述 在项目开发中&#xff0c;遇到在表格中一次性加载完的需求&#xff0c;且加载数量不少&#xff0c;有几百几千条&#xff0c;并且每条都可能有自己的下拉框&#xff0c;输入框来做编辑功能&#xff0c;此时普通的el-table肯定会导致浏览器卡死&#xff0c;那么怎么…...

编程日记 2023/2/24 23:36:49

5分钟掌握B站音频提取：BilibiliDown开源工具的完整指南

5分钟掌握B站音频提取&#xff1a;BilibiliDown开源工具的完整指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/4/1 12:06:08

完整贡献指南：如何为endoflife.date添加新的产品支持信息

完整贡献指南&#xff1a;如何为endoflife.date添加新的产品支持信息 【免费下载链接】endoflife.date Informative site with EoL dates of everything 项目地址: https://gitcode.com/gh_mirrors/en/endoflife.date 你是否想为开源项目贡献自己的力量&#xff0c;但不…...

编程新知 2026/4/1 11:01:21

PyTorch 3.0 DDP + torch.compile混合训练面试通关手册：涵盖Graph Break诊断、Shard策略冲突、以及3种反模式现场复现

第一章&#xff1a;PyTorch 3.0 静态图分布式训练面试概览PyTorch 3.0 并非官方发布版本&#xff08;截至2024年&#xff0c;PyTorch最新稳定版为2.3&#xff09;&#xff0c;但“PyTorch 3.0”在面试语境中常被用作一种假设性技术命题&#xff0c;用于考察候选人对静态图编译、…...

编程新知 2026/4/1 10:18:44

Unity物理游戏开发：如何用FixedTimestep优化不同设备的性能表现

Unity物理游戏开发&#xff1a;动态调整FixedTimestep实现跨设备性能优化 移动端游戏开发者常面临一个核心矛盾&#xff1a;物理模拟精度与设备性能的平衡。当你的游戏在高端设备上流畅运行&#xff0c;却在低端机型出现卡顿时&#xff0c;问题往往出在Fixed Timestep的静态配置…...

编程新知 2026/4/1 10:16:36

vscode如何添加ollama本地模型-实现token自由

vscode一直支持的都是云端闭源的模型&#xff0c;例如 GPT Claude等等&#xff0c;当这些闭源模型的免费额度用完之后&#xff0c;则需要付费继续使用。本文介绍的是vscode接入ollama的本地模型&#xff0c;从而实现token自由。 ollama 首先需要到ollama的官网下载ollama应用…...

编程新知 2026/4/1 9:58:27

港科资讯|郑光廷教授出席国际科技组织发展与全球科技治理论坛 分享协作实践

2026年3 月 28 日&#xff0c;国际科技组织发展与全球科技治理论坛在北京中关村国际创新中心成功举办。香港科技大学副校长&#xff08;研究及发展&#xff09;郑光廷教授受邀出席并发表主题演讲&#xff0c;香港科大内地办(北京)主任袁冶老师一同参会&#xff0c;与中外嘉宾交…...

编程新知 2026/4/1 9:03:16

S2-Pro在Windows系统的一键部署与简易客户端开发

S2-Pro在Windows系统的一键部署与简易客户端开发 1. 引言 如果你是一名Windows用户&#xff0c;想要快速体验S2-Pro的强大能力&#xff0c;但又不想折腾复杂的命令行操作&#xff0c;这篇文章就是为你准备的。我们将从零开始&#xff0c;带你完成两个关键步骤&#xff1a; 在…...

编程新知 2026/4/1 8:26:23

G-Helper终极指南：如何用轻量级工具优化华硕笔记本性能与电池健康

G-Helper终极指南&#xff1a;如何用轻量级工具优化华硕笔记本性能与电池健康 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF…...

编程新知 2026/4/1 8:08:06

ms-swift多模态训练：图文视频语音混合训练，速度提升100%+

ms-swift多模态训练&#xff1a;图文视频语音混合训练&#xff0c;速度提升100% 1. 多模态训练的新选择 在AI模型开发领域&#xff0c;多模态训练一直是个技术难题。传统方法需要分别处理文本、图像、视频和语音数据&#xff0c;然后手动对齐不同模态的特征表示&#xff0c;整…...

编程新知 2026/4/1 7:49:37

ide-eval-resetter：突破JetBrains IDE试用期限制的创新方案——2026开发者必备指南

ide-eval-resetter&#xff1a;突破JetBrains IDE试用期限制的创新方案——2026开发者必备指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 问题引入&#xff1a;JetBrains IDE试用期限制的痛点分析 作为开发…...

编程新知 2026/4/1 7:47:37