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)";

canvas画笔功能 Signature Pad相关推荐

记canvas画笔笔迹的多次优化过程
我们的项目是面向学校老师的教学软件,所以肯定少不了互动白板的功能,而这个里面的画笔功能是由我来开发的,下面介绍这个过程中遇到的问题以及解决方法. 首先给大家明确下由于软件中的画布可以自由移动,会超出屏 ...
【Android开发基础】Canvas画笔（以刮刮乐为例）
文章目录一.引言二.设计 1.获取图片资源 2.获取屏幕信息 3.Canvas涂层 4.随机内容 5.屏幕监听三.附件 1.UI设计 2.总代码 (1)控件初始化 (2)图层初始化 3.源代码 ...
html整体图片拆分拼图代码源代码,canvas拼图功能实现代码示例
最近做项目的时候遇到照片拼图的功能,便在这里分享自己的封装的canvas拼图功能,可能代码写的不好,如果有疑问或者是有更好的方法的,可以私聊我,或者是评论指出,感谢各位实现的思路其实挺简单的,主要是 ...
【Scratch】青少年蓝桥杯_每日一题_11.01_画笔功能
用心写好每一篇文章效果图一.题目背景通过编程实现具有画笔功能的程序﹐按下鼠标画笔跟随鼠标移动﹐抬起鼠标画笔停止绘制. 二.编程实现 1)运行程序,清空屏幕﹐画笔角色隐藏; 2)在舞台区域按下鼠标 ...
MFC 画笔功能实现
一.4个消息处理如果是在VS2012上,我们可以很方便的在对话框的属性栏找到消息页面添加消息如果是以前的VC6的版本,那还是得老老实实使用Class Wizzard类向导添加消息左键按下.抬起. ...
微信小程序canvas绘图功能小例子
canvas基本功能介绍 01canvas组件在wxml页面直接使用canvas来调用组件,canvas的默认宽高为300px*225px,如果要使得画布根据屏幕尺寸变化,可以在js文件中利用get ...
Canvas画笔的基本使用
文章目录 Canvas画笔的基本使用图形绘制设置样式画笔实例练习渐变色绘制镂空的房子绘制坐标网格绘制坐标系绘制坐标点绘制折线图参考文档 Canvas画笔的基本使用图形绘制需要理 ...
Canvas实现画笔功能擦除画笔颜色但不擦除背景
注: 需要引入Jquery.js !!!!! 功能演示: html代码: <!DOCTYPE html> <html><head><meta charset= ...
canvas简单的实现画笔功能
还是直接上代码.(自己写的,可能代码布局有点乱,进步中,加油) <!DOCTYPE html> <html><head><meta charset=" ...
Android之Canvas画笔和画布
久违的Canvas画布,终于学到这里了,学完以后附上博文一篇以便日后记不住. 目录一.Canvas(画布) 二.Paint(画笔) 三.实例涉及的相关知识点 1.绘制安卓机器人 2.绘制文本 3. ...

canvas画笔功能 Signature Pad

canvas画笔功能 Signature Pad

Signature Pad介绍

signature_pad 方法

属性配置项

使用方法

canvas画笔功能 Signature Pad相关推荐

最新文章

热门文章