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

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

news 2026/5/23 22:18:12

文章目录

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

一、效果:

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

二、实现:

<!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

STM32F4电池电量监测实战：用HAL库和ADC DMA，从硬件分压到软件滤波全流程解析

STM32F4电池电量监测实战&#xff1a;从硬件设计到软件滤波的工程化实现 在物联网设备和便携式电子产品的开发中&#xff0c;精确监测电池电量是一个看似简单却暗藏玄机的关键技术点。许多开发者都曾遇到过这样的困境&#xff1a;实验室测试时电量显示精准稳定&#xff0c;一旦…...

编程新知 2026/5/23 22:12:27

从数据下载到结果分析：一份给GNSS新手的GAMP+北斗PPP完整避坑指南

从零搭建北斗PPP分析环境&#xff1a;GAMP全流程实战与精度优化策略 刚接触GNSS精密单点定位的研究者常会遇到这样的困境&#xff1a;下载了数据却无法识别&#xff0c;编译通过程序却得不到收敛结果&#xff0c;最终输出的坐标误差曲线像过山车般起伏。本文将用最接地气的方式…...

编程新知 2026/5/23 21:42:40

不止于看见，更在于改变——双碳传媒的全球工业服务生态

在数字化与智能化重塑世界的今天&#xff0c;传统的工业传播边界正在被打破。双碳传媒&#xff08;秦皇岛&#xff09;有限公司&#xff0c;正以AI技术为核心驱动&#xff0c;重新定义全球工业服务的生态格局。我们深知&#xff0c;服务国家战略与顶级企业&#xff0c;需要的是…...

编程新知 2026/5/23 21:12:46

一个简单的MCP代码示例

MCP项目测试示例from fastmcp import FastMCP# 1. 创建 MCP 服务器实例 mcp FastMCP("MyFirstServer")# 2. 定义一个工具&#xff08;Tool&#xff09;&#xff1a;AI 可以调用的函数 mcp.tool() def add(a: int, b: int) -> int:"""将两个数字相…...

编程新知 2026/5/23 21:06:19

STM32CubeMX保姆级教程：从零配置STM32F103C8T6工程，5分钟点亮你的第一个LED

STM32CubeMX极简入门指南&#xff1a;5分钟实现LED控制全流程 第一次接触嵌入式开发时&#xff0c;那种既兴奋又忐忑的心情我至今记忆犹新。看着眼前这块小小的蓝色开发板&#xff0c;既想立刻让它"活"起来&#xff0c;又担心复杂的配置过程会让人望而却步。幸运的是…...

编程新知 2026/5/23 18:27:15

如何免费获得你的AI桌面助手：UI-TARS桌面版完整使用指南

如何免费获得你的AI桌面助手&#xff1a;UI-TARS桌面版完整使用指南 【免费下载链接】UI-TARS-desktop The Open-Source Multimodal AI Agent Stack: Connecting Cutting-Edge AI Models and Agent Infra 项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS-desktop …...

编程新知 2026/5/23 17:57:59

初次使用taotoken模型广场进行模型选型与对比试用的直观体验

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初次使用Taotoken模型广场进行模型选型与对比试用的直观体验 对于需要接入大模型能力的开发者或团队而言&#xff0c;面对市场上众…...

编程新知 2026/5/23 17:14:42

【2026年华为暑期实习-非AI方向(通软嵌软测试算法数据科学)- 5月22日-第三题- 数据传输网络调优】（题目+思路+JavaC++Python解析+在线测试)

题目内容 有一个由 NNN 个数据交换节点（编号为 000 到 N−1N-1...

编程新知 2026/5/23 15:38:37

JetBrains IDE试用重置终极指南：如何快速解决开发工具到期问题

JetBrains IDE试用重置终极指南&#xff1a;如何快速解决开发工具到期问题 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 还在为IntelliJ IDEA、PyCharm等JetBrains IDE试用期到期而烦恼吗&#xff1f;当你的开发…...

编程新知 2026/5/23 15:29:37

告别龟速下载！trackerslist项目让你的BT下载速度飙升300%的终极指南

告别龟速下载&#xff01;trackerslist项目让你的BT下载速度飙升300%的终极指南 【免费下载链接】trackerslist Updated list of public BitTorrent trackers 项目地址: https://gitcode.com/GitHub_Trending/tr/trackerslist 你是否曾经面对BT下载时进度条几乎不动而感…...

编程新知 2026/5/23 15:29:23