canvas画笔功能 Signature Pad

原创 2017年08月08日 15:51:32

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)";
版权声明:本文为博主原创文章,未经博主允许不得转载。

android 画笔和Canvas介绍.

  • 2013年09月29日 17:00
  • 15KB
  • 下载

Canvas_画笔_橡皮擦

  • 2013年09月21日 09:31
  • 8KB
  • 下载

HTML5 canvas 在线画笔绘图工具(二)

Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton、TColorButton)组成,因为之前我大部...

HTML5_canvas(设置画笔样式、左右跑动的小块、绘制路径的方法、写字板、绘制圆形的方法、吃豆豆、绘制文本、环形进度条)设置一个模板

1、canvas(相当于画图板) 这句话是必须写的 在版本高的浏览器中支持就不会显示出来,版本低的就会显示出 —->宽高样式直接在里面写;(默认宽度300,高...

【Android】自定义View、画家(画布)Canvas与画笔Paint的应用——画图、涂鸦板app的实现

利用一个简单的画图app来说明安卓的图形处理类与自定义View的应用。 如下图,有一个供用户自己任意画图、涂鸦的app, 这里不做那么花俏了,仅提供黑白两色,但可以改变笔尖的粗细。 实质...

android 中的绘制类Paint 画笔,Canvas 画布,Bitmap 类和BitmapFactory及自定义属性

常用的绘图类是Paint 画笔,Canvas 画布,Bitmap 类和BitmapFactoryPaint类Paint类代表画笔,用来描述图形的颜色和风格,如线宽,颜色,透明度,和填充效果等信 息,...

带你快速玩转canvas(6)导出为base64字符串和画笔的保存

8. 将canvas转为图片可用的base64字符串解释:1. 简单来说,就是将canvas标签的画布内容,转为base64字符串; 2. base64字符串作为img标签的src,是可以直接显示为图...

【Android】自定义View、画布Canvas与画笔Paint

安卓自定义View其实很简单。这个View可以像《【Android】利用Java代码布局,按钮添加点击事件》(点击打开链接)一样,利用Java代码生成一系列的组件。也可以配合画布Canvas与画笔Pa...

Paint与Canvas(形状工具本质都是调用画笔工具)

Paint与Canvas 像我们平时画图一样,需要两个工具,纸和笔。Paint就是相当于笔,而Canvas就是纸,这里叫画布。 所以,凡有跟要要画的东西的设置相关的,比如大小,粗细,画笔颜色,透明...

原生js实现Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,有实例Demo

一、实现的功能 1、基于oop思想构建,支持坐标点、线条(由坐标点组成,包含方向)、多边形(由多个坐标点组成)、圆形(包含圆心坐标点和半径)等实体 2、原生JavaScript实现,不依赖任何第三方j...
  • eguid_1
  • eguid_1
  • 2017年11月07日 22:57
  • 380
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:canvas画笔功能 Signature Pad
举报原因:
原因补充:

(最多只允许输入30个字)