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

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

news 2026/2/7 12:25:43

文章目录

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

一、效果:

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

二、实现:

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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/1/31 13:59:37

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/1/18 3:11:35

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/1/26 19:01:00

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/2/6 7:30:33

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/12/4 15:47:17

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2026/1/26 2:48:53