前端使用Canvas实现网页电子签名(撤销、下载)

前言:一般在一些后台的流程资料以及审核的场景中会需要电子签名,介绍一种用canvas实现的电子签名,此案例用的是原生js

效果展示:

 一、html和css:

      <div class="divCla2"><canvas id="myCanvas" width="600" height="400"></canvas><button class="clearBtn">撤销</button><button class="downBtn">下载</button></div>
.divCla2{border: 1px solid #817e7e;width: 600px;height: 400px;
}

二、js实现逐步分析:(如果着急实现功能可以直接下滑到三)

整个电子签名的流程无非就是按下鼠标、画线、松开鼠标、停止画线

1、需要定义三个值:是否按下、当前的x坐标和y坐标,鼠标按下的时候就开始画

//获取canvas
let canvas = document.getElementById("myCanvas");
// 状态status,用于标记开始和暂停
let status = false;
//xy坐标
let x = 0;
let y = 0;
// 鼠标按下的时候开始画
canvas.addEventListener("mousedown", (e) => {status = true;x = e.offsetX;y = e.offsetY;console.log(x, y, status);
});

2、鼠标松开时就改变status的值为false

canvas.addEventListener("mouseup", () => {status = false;
});

3、鼠标移出画布时也一样:

canvas.addEventListener("mouseout", (e) => {status = false;
});

/4、鼠标移入并且status状态为true的时候就是可以画的

canvas.addEventListener("mousemove", () => {if (!status) return;
});

5、创建一个二维平面当做“笔”,并且加一些样式,比如描边颜色、拐角形状、线条末端形状、线条宽度等,然后绘制线条,可以看每一步的注释:

let ctx = canvas.getContext("2d"); // 建立二维平面
canvas.addEventListener("mousemove", (e) => {if (!status) return;//设置描边颜色ctx.strokeStyle = "#000";//拐角形状ctx.lineJoin = "round";//线条宽度ctx.lineWidth = 2;//末端形状ctx.lineCap = "round";//创建一条路径ctx.beginPath();//线条从哪里开始ctx.moveTo(x, y);//线条从哪里结束ctx.lineTo(e.offsetX, e.offsetY);//绘制路径ctx.stroke();//作为下次开始使用x = e.offsetX;y = e.offsetY;
});

 这样就已经可以绘制了

6、如果写错了,需要撤销功能,使用clearRect方法:

//撤销
const clearBtn = document.querySelector(".clearBtn");
clearBtn.addEventListener("click", () => {ctx.clearRect(0, 0, canvas.width, canvas.height);
});

7、 还要配合应用场景,有些时候需要将电子签名转化成图片,然后进行下载或者传给后端等,实现下载:

//下载
let downBtn=document.querySelector(".downBtn");
downBtn.addEventListener("click",()=>{let a = document.createElement("a");a.href = canvas.toDataURL("image/png");a.download = "canvas.png";a.click();
})

 

三、完整代码,可以直接复制使用:

let canvas = document.getElementById("myCanvas");let status = false;
let x = 0;
let y = 0;
canvas.addEventListener("mousedown", (e) => {status = true;x = e.offsetX;y = e.offsetY;console.log(x, y, status);
});
canvas.addEventListener("mouseup", () => {status = false;
});
canvas.addEventListener("mouseout", (e) => {status = false;
});
canvas.addEventListener("mousemove", () => {if (!status) return;
});
let ctx = canvas.getContext("2d"); // 建立二维平面
canvas.addEventListener("mousemove", (e) => {if (!status) return;ctx.strokeStyle = "#000";ctx.lineJoin = "round";ctx.lineWidth = 2;ctx.lineCap = "round";ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();x = e.offsetX;y = e.offsetY;
});
//撤销
const clearBtn = document.querySelector(".clearBtn");
clearBtn.addEventListener("click", () => {ctx.clearRect(0, 0, canvas.width, canvas.height);
});
//下载
let downBtn=document.querySelector(".downBtn");
downBtn.addEventListener("click",()=>{let a = document.createElement("a");a.href = canvas.toDataURL("image/png");a.download = "canvas.png";a.click();
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/56483.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构-排序算法

基于交换的排序算法 快速排序&#xff1a; 最优情况 最优情况下&#xff0c;每次找到的参考轴把数据分成均匀的两半&#xff0c;最后应该是一个平衡二叉树状态&#xff1b;二叉树的层数&#xff08;logn&#xff09;即为递归需要进行的次数&#xff0c;并且每轮递归结束时&…

Java语言-抽象类

目录 1.抽象类概念 2.抽象类语法 3.抽象类特性 4.抽象类作用 1.抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c; 如果 一个类中没有包含足够的信息来描绘一个具体…

YARN调度原理详解

YARN&#xff08;Yet Another Resource Negotiator&#xff09;是 Hadoop 集群的资源管理和作业调度框架&#xff0c;它的设计旨在更好地管理和调度 Hadoop 集群中的资源。YARN 解决了传统 Hadoop MapReduce 中资源管理与作业调度紧耦合的问题&#xff0c;使得不同类型的计算任…

115.WEB渗透测试-信息收集-ARL(6)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;114.WEB渗透测试-信息收集-ARL&#xff08;5&#xff09; httpd就是apache环境&#xff0…

跨平台音摄像头|屏幕推送选OBS还是SmartPublisher?

好多开发者希望搞明白OBS和 SmartPublisher的区别和使用场景差别&#xff0c;本文就二者差别做个对比&#xff1a; OBS OBS&#xff08;Open Broadcaster Software&#xff09;是一款免费且开源的跨平台流媒体和视频录制软件。以下是关于它的详细介绍&#xff1a; 功能特点&a…

力扣----最长连续序列

128. 最长连续序列 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4 解释&#xff1a;最长数字连续序列是 [1, 2, 3, 4]。它的长度为 4。 示例 2&#xff1a; 输入&#xff1a;nums [0,3,7,2,5,8,4,6,0,1] 输出&#xff1a;9提示&#xff…

音乐播放器项目专栏介绍​

1.简介 本专栏使用Qt QWidget作为显示界面&#xff0c;你将会学习到以下内容&#xff1a; 1.大量ui美化的实例。 2.各种复杂ui布局。 3.常见显示效果实现。 4.大量QSS实例。 5.Qt音频播放&#xff0c;音乐歌词文件加载&#xff0c;展示。 6.播放器界面换肤。 相信学习了本专栏…

[单master节点k8s部署]39.安装mysql

通过下面的命令安装mysql。首先下载mysql的rpm包。mysql-community-release-el7-5.noarch.rpm 这个包的作用是将 MySQL 的官方 YUM 仓库添加到系统中&#xff0c;随后通过yum install来安装mysql。 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm rpm …

Oracle Expdp按条件导出-指定表数据

1.场景描述 业务需求&#xff1a;导出A机构、2024的数据&#xff0c;以dmp格式&#xff0c;保留导出日志。首先&#xff0c;需要分析库中需要导出的表清单、表的机构字段约束、表的时间约束&#xff1b;然后再导出。 2.方案分析 本次采用Oracle的expdp数据泵方式导出&#xf…

基于Docker的FRP内网穿透部署

服务器搭建&#xff08;FRPS&#xff09; 创建配置文件 # 创建存放目录 sudo mkdir /etc/frp # 创建frps.ini文件 nano /etc/frp/frps.ini frps.ini内容如下&#xff1a; [common] # 监听端口 bind_port 7000 # 面板端口 dashboard_port 7500 # 登录面板账号设置 dashboa…

计算机网络(五)—— 运输层

1. 运输层概述 1.1 课后练习 2. 运输层端口、复用与分用的概念 2.1 课后练习 3. UDP和TCP的对比 3.1 总结 3.2 课后练习 1. 运输层概述 ■ 之前的计算机网络体系结构中的物理层、数据链路层以及网络层它们共同解决了将主机通过异构网…

《数字信号处理》学习09-部分分式展开法计算z 逆变换

在之前的文章中&#xff0c;我已经学习了使用留数法&#xff08;围线积分法&#xff09;来计算z逆变换 《数字信号处理》学习08-围线积分法&#xff08;留数法&#xff09;计算z 逆变换-CSDN博客 接着学习第二种计算z变换的方法&#xff1a;部分分式展开法。 目录 一&…

决策智能与强化学习:重放比率(replay ratio)

知乎&#xff1a;DILab决策实验室&#xff08;已授权&#xff09;链接&#xff1a;https://zhuanlan.zhihu.com/p/898641863 0. 概览 近年来&#xff0c;深度强化学习&#xff08;Deep Reinforcement Learning, DRL&#xff09;在诸多领域取得了显著的成果。然而&#xff0c;随…

域环境模拟实验搭建

1. 域环境搭建 总体来说下一步下一步即可 域&#xff1a;统一的管理计算机的集群&#xff0c;中心管理机器&#xff08;域控制器 DC&#xff09;管理整个内网&#xff08;域内成员机器&#xff09; 条件&#xff1a;1. 需要一台域控制器 -- windows server版本&#xff08;w…

高级英语1第四版教材全解pdf课后答案+课文翻译张汉熙

《高级英语1》是张汉熙教授编著的一本英语教材&#xff0c;广泛用于国内高校英语专业高年级学生的教学。这本书以提高学生的英语综合能力为目标&#xff0c;注重语言知识的系统性和实用性&#xff0c;同时强调跨文化交际能力的培养。书中选材丰富&#xff0c;涵盖了文学、历史、…

Cloudlog delete_oqrs_line 未授权SQL注入漏洞复现

0x01 产品简介 Cloudlog 是一个自托管的 PHP 应用程序,可让您在任何地方记录您的业余无线电联系人。使用PHP和MySQL构建的基于Web的业余无线电记录应用程序支持从HF到微波的一般站记录任务 0x02 漏洞概述 Cloudlog delete_oqrs_line 接口存在未授权SQL注入漏洞,未经身份验…

UE5学习笔记24-添加武器弹药

一、给角色的武器添加弹药 1.创建界面&#xff0c;根据笔记23的界面中添加 2.绑定界面控件 UPROPERTY(meta (Bindwidget))UTextBlock* WeaponAmmoAmount;UPROPERTY(meta (Bindwidget))UTextBlock* CarriedAmmoAmount; 3.添加武器类型枚举 3.1创建武器类型枚举头文件 3.2创建文…

Java 小游戏《超级马里奥》

文章目录 一、效果展示二、代码编写1. 素材准备2. 创建窗口类3. 创建常量类4. 创建动作类5. 创建关卡类6. 创建障碍物类7. 创建马里奥类8. 编写程序入口 一、效果展示 二、代码编写 1. 素材准备 首先创建一个基本的 java 项目&#xff0c;并将本游戏需要用到的图片素材 image…

linux上文件的简单批量操作

示例目录&#xff1a;cd /home/resource/dicom/ 前60个文件 # 复制前60个文件到其他目录 ls -rt |head -n 60 |xargs -i cp -rf {} /home/temp/ # 移动前60个文件到其他目录 ls -rt |head -n 60 |xargs -i mv {} /home/temp/ # 删除前60个文件 ls -rt |head -n 60 |xargs -i …

学习记录:js算法(六十六):数组中的第K个最大元素

文章目录 数组中的第K个最大元素思路一思路二 数组中的第K个最大元素 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 示例 1: 输入: [3,2,1,5,6…