canvas画笔功能 Signature Pad

SignaturePad是一款基于HTML5 Canvas的JavaScript库,用于绘制平滑的电子签名。它支持主流浏览器及移动端,提供了丰富的API来操作签名数据,如保存为图片、加载数据、清空画布等功能,并允许自定义画笔样式。

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

canvas画笔功能 Signature Pad

Signature Pad介绍

Signature Pad是一个用于绘制平滑签名的JavaScript库。 它是基于HTML5画布.它适用于所有现代桌面和移动浏览器,不依赖于任何外部库
这是一个签名插件,兼容主流浏览器和移动端,绘制的曲线相当平滑.提供一些相当实用的接口.体积小,无依赖,遵循MIT协议,这是GitHub地址signature_pad

signature_pad 方法
var canvas = document.querySelector("canvas");
//在初始化的时候会清空画布上的所有绘制的信息
var signaturePad = new SignaturePad(canvas);

//默认保存为PNG格式的图片,参数为导出的格式,返回值为导出的数据
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/svg+xml"); // save image as SVG

// 将数据加载到画布上.参数为数据本身, 无返回值
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// 清空画布内容,无返回值
signaturePad.clear();

// 判断画布是否为空.返回Boolean 值
signaturePad.isEmpty();

// 移除画布上的所有事件,就是无法绘制了
signaturePad.off();

// 添加事件,默认为所有,和 off()相反
signaturePad.on();
属性配置项
dotSize   default = (minWidth + maxWidth/2)
//number或函数(取返回值),作用为点击画布的时候,绘制一个半径为dotSize的圆
//注意事项,从input 获取的值为string,而dotSize 为数值,如果通过input设置画笔大小,需要转number,不然就成了字符串拼接,就会出现超级大的点.
minWidth default  0.5
number画笔的笔锋
maxWidth default  2.5
number画笔的粗细
throttle default 16
number每秒绘制的次数,越大越耗性能,越细腻
backgroundColor default null
画布背景色,可以为 green 字符串,#FFFFFF  rgb(0,0,0)格式
penColor default #000000
画笔颜色,可以为 green 字符串,#FFFFFF  rgb(0,0,0)格式
velocityFilterWeight default 0.7
number 用于根据先前的速度修改新速度的重量
onBegin 
回调函数,落笔时候的回调
onEnd
回调函数,收笔时候的回调
使用方法
var signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});
//或者在初始化之后
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值