html5 在线签名,html5手写签名

最新推荐文章于 2025-06-05 11:28:59 发布

路肖南Lester

最新推荐文章于 2025-06-05 11:28:59 发布

阅读量1k

点赞数

文章标签： html5 在线签名

这篇博客介绍了如何使用HTML5的canvas元素实现在线手写签名功能。通过监听鼠标和触摸事件，结合canvas的绘图方法，创建了一个简单的手写签名板。用户可以写字并保存为图片。此外，还提供了 Ionic5 的 SignaturePad 示例和相关代码片段，适用于移动端手写签名的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sxqm

清空

生成图片

var canvas, board;

canvas = document.getElementById('myCanvas');

canvas.height = 300;

canvas.width = 400;

board = canvas.getContext('2d');

board.lineWidth = 1; //设置画笔粗细

board.strokeStyle = "#f00";

board.lineJoin = "round"; //设置画笔轨迹基于圆点拼接

var mousePress = false;

var last = null;

function beginDraw(event) {

mousePress = true;

}

function endDraw(event) {

mousePress = false;

event.preventDefault();

last = null;

}

function drawing(event) {

event.preventDefault();

if (!mousePress) return;

var xy = GetPos(event);

if (last != null) {

board.beginPath();

board.moveTo(last.x, last.y);

board.lineTo(xy.x, xy.y);

board.stroke();

}

last = xy;

}

function GetPos(event) {

var isTouch = event.type.indexOf('touch') >= 0 ? true : false;

var x = isTouch ? event.touches[0].pageX : event.offsetX + event.target.offsetLeft;

var y = isTouch ? event.touches[0].pageY : event.offsetY + event.target.offsetTop;

return { x: x, y: y };

}

function save() {

var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码

var img = new Image();

img.src = data;

$(document.body).append(img);

}

function clean() {

board.clearRect(0, 0, canvas.width, canvas.height);

}

canvas.onmousedown = beginDraw;

canvas.onmousemove = drawing;

canvas.onmouseup = endDraw;

canvas.addEventListener('touchstart', beginDraw, false);

canvas.addEventListener('touchmove', drawing, false);

canvas.addEventListener('touchend', endDraw, false);

canvas画布实现手写签名效果

最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码:

请在下面 ...

Ionic5手写签名SignaturePad

测试程序下载:https://hanzhe.lanzous.com/itt47kncw3a 初始化项目 1. 首先新建一个Ionic5的项目: ionic start test-1 blank 2. ...

html5 手写的canvas实现

试用支持canvas的浏览器,无JS依赖,运用新的HTML5技术DrawBoard.renderDrawer('myHandWrite',{ penColor:'#FF0000', penWidt ...

用canvas实现手写签名功能

最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器.这样的需求用 canvas 实现是最好的.需要用到 canvas 的以下几个属性: b ...

WORD2003电子签名插件(支持手写、签章)

1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...

android-------手写签名系统的设计与实现之实现画笔设置

引自:http://www.xuebuyuan.com/1754358.html 既然我们实现了画布和画笔,也实现了手写,为了提高可用性,我们增加了对画笔风格的设置功能,这样就可以根据自己的需要选择画 ...

关于HTML5手机端页面缩放的问题

通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是:

随机推荐

vsftp 使用匿名帐号登陆

1.正常安装. 2.改配置文件:vi /etc/vsftpd/vsftpd.conf #允许匿名用户登录FTP anonymous_enable=YES #设置匿名用户的登录目录(如需要,需自己添加并 ...

Android常用动画alpha和rotate同时使用

Android的动画可以是一种动画,也可以多种动画作用于一张图片上,如RotaeAnimation和AlphaAnimation同时放到一个配置文件中 alpha1.xml <?xml vers ...

二叉树遍历 C&num;

二叉树遍历 C# 什么是二叉树二叉树是每个节点最多有两个子树的树结构 (1)完全二叉树——若设二叉树的高度为h,除第 h 层外,其它各层 (1-h-1) 的结点数都达到最大个数,第h层有叶子结点,并 ...

MySQL grant命令使用

MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户一.grant 普通数据用户,查询.插入.更新.删除数据库中所有表数据的权利. grant sele ...

吾八哥学Python(五)：Python基本数学运算

今天我们学习Python里的基本数学运算方法,还是通过例子来练习吧! 加减乘除求余 #加法 print(12+34) #减法 print(30-10.0) #乘法 print(3*5) #除法 pri ...

什么是BOM&quest;,什么是DOM&quest; BOM跟DOM之间的关系

什么是BOM? BOM是browser object model的缩写,简称浏览器对象模型.是用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. 比如 alert(); ...

&period;7-浅析webpack源码之WebpackOptionsDefaulter模块

WebpackOptionsDefaulter模块通过参数检测后,会根据单/多配置进行处理,本文基于单配置,所以会进行到如下代码: if (Array.isArray(options)) { com ...

Spring Boot 2 (三)：Spring Boot 2 相关开源软件

Spring Boot 2 (三):Spring Boot 2 相关开源软件一.awesome-spring-boot Spring Boot 中文索引,这是一个专门收集 Spring Boot 相 ...

人工智能&lowbar;机器学习——pandas - 箱型图

箱型图对数据的展示也是非常清晰的,这是箱型图的一些代码 #导报机器学习三剑客 import numpy as np import pandas as pd from matplotlib impor ...

链式编程&colon;遇到多个构造器参数(Constructor Parameters)时要考虑用构建器(Builder)

public class NutritionFacts { private final int servingSize; private final int servings; private fin ...