记录一个h5页面生成canvas画布做签名的js插件--signature_pad
demo地址:https://jsfiddle.net/02dLn15g/5/
GitHub地址:https://github.com/szimek/signature_pad
配置项:
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
回调函数,收笔时候的回调
记录一个h5页面生成canvas画布做签名的js插件--signature_pad的更多相关文章
- 编写第一个H5页面
		
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>第 ...
 - 《笔记篇》非JS方法跳转到一个新页面,主要防止客户端禁止浏览器JS以后的跳转异常
		
用非JS方法打开一个新页面,主要防止客户端禁止浏览器JS以后的跳转失效 <meta http-equiv="refresh" content="0; url=htt ...
 - Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template
		
pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具 ...
 - H5页面,华为手机打开不加载JS的问题
		
今天在做H5页面放在其他手机上面都可以刷出列表,但是就是放在华为手机上面刷不出来,怎么想都想不通,后面主管说华为手机的浏览器是严格遵守H5什么鬼东西的,然后其他浏览器做到比较好的,如果有报错就帮我们解 ...
 - H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报
		
摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结 ...
 - H5 新增标签canvas 画布
		
canvas是写在body中的标签,设置宽高后,通过JS来往其中绘制想要的内容, canvas可以理解为一个画板,而JS就是你的画笔. 1.获取到画布 var canvas = document.ge ...
 - 推荐一个静态页面生成工具-mkdocs
		
最近需要找一个生成api文档的工具,找来找去发现mkdocs特别符合需求. 部署只需python和pip 直接生成静态html 用markdown编写 不需要再markdown里指明日期.标题等信息 ...
 - angular中使用canvas画布做验证码
		
//填充画布,五位随机数 drawNumber(): void { this.clearCanvas(); let ctx: CanvasRenderingContext2D = this.myGra ...
 - 安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?
		
webview.getSettings().setTextZoom(100);WebView加上这个设置后,WebView里的字体就不会随系统字体大小设置发生变化了. https://segmentf ...
 
随机推荐
- 莫烦TensorFlow_11 MNIST优化使用CNN
			
import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #number 1 to 10 d ...
 - Shell:
			
Bash Notes for professionals ebook https://blog.csdn.net/simple_the_best/article/details/52821136 27 ...
 - LeetCode 139. Word Break单词拆分 (C++)
			
题目: Given a non-empty string s and a dictionary wordDict containing a list of non-emptywords, determ ...
 - ESP8266 LUA脚本语言开发: 准备工作-为方便学习(统一使用本人编译的固件)
			
前言 注:为了咱后期统一起来,所以统一使用我编译的LUA固件 一,固件打开了SmartConfig / AirKiss 配网功能 二,打开了SSL 三,其它模块化程序 刷空固件 一,为了保证固件是干净 ...
 - 8.22 NOIP模拟测试29(B) 爬山+学数数+七十和十七
			
T1 爬山 二分最高高度,$O(1)$判断是否可行. #include<iostream> #include<cstdio> #define ll long long usin ...
 - [LeetCode] 266. Palindrome Permutation 回文全排列
			
Given a string, determine if a permutation of the string could form a palindrome. Example 1: Input: ...
 - scss 入门基础
			
在一个项目中,样式是必不可少的一部分,而对于一个完整的项目来说是有个基准色调的.在项目需求变化不大的情况下,可以直接在css中写这些颜色值之类的东西.但是如果遇到一个朝令夕改的领导或者甲方,那会变得相 ...
 - 【08月02日】A股滚动市盈率PE历史新低排名
			
2010年01月01日 到 2019年08月02日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2019年08月02日市盈率在300以下的公司. 1 - XD栖霞建(SH600533) - 历 ...
 - 标签一致项(LC-KSVD)-全文解读
			
Learning A Discriminative Dictionary for Sparse Coding via Label Consistent K-SVD 1,同步学习判决字典和线性分类器 2 ...
 - vue 复制文本到剪切板上
			
1.下载clipboard.js npm install vue-clipboard2 --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard ...