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的更多相关文章

  1. 编写第一个H5页面

    <!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>第 ...

  2. 《笔记篇》非JS方法跳转到一个新页面,主要防止客户端禁止浏览器JS以后的跳转异常

    用非JS方法打开一个新页面,主要防止客户端禁止浏览器JS以后的跳转失效 <meta http-equiv="refresh" content="0; url=htt ...

  3. Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template

    pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具 ...

  4. H5页面,华为手机打开不加载JS的问题

    今天在做H5页面放在其他手机上面都可以刷出列表,但是就是放在华为手机上面刷不出来,怎么想都想不通,后面主管说华为手机的浏览器是严格遵守H5什么鬼东西的,然后其他浏览器做到比较好的,如果有报错就帮我们解 ...

  5. H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报

    摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结 ...

  6. H5 新增标签canvas 画布

    canvas是写在body中的标签,设置宽高后,通过JS来往其中绘制想要的内容, canvas可以理解为一个画板,而JS就是你的画笔. 1.获取到画布 var canvas = document.ge ...

  7. 推荐一个静态页面生成工具-mkdocs

    最近需要找一个生成api文档的工具,找来找去发现mkdocs特别符合需求. 部署只需python和pip 直接生成静态html 用markdown编写 不需要再markdown里指明日期.标题等信息 ...

  8. angular中使用canvas画布做验证码

    //填充画布,五位随机数 drawNumber(): void { this.clearCanvas(); let ctx: CanvasRenderingContext2D = this.myGra ...

  9. 安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?

    webview.getSettings().setTextZoom(100);WebView加上这个设置后,WebView里的字体就不会随系统字体大小设置发生变化了. https://segmentf ...

随机推荐

  1. Appium+python自动化(二)- 环境搭建—下(超详解)

    简介 宏哥的人品还算说得过去,虽然很久没有搭建环境了,但是换了新电脑设备,一气呵成,将android的测试开发环境已经搭建准备完毕.上一篇android测试开发环境已经准备好, 那么接下来就是appi ...

  2. Hive学习之修改表、分区、列

    Hive学习之修改表.分区.列 https://blog.csdn.net/skywalker_only/article/details/30224309 https://www.cnblogs.co ...

  3. 没有重写接口方法,IDEA没有报错。

    今天在IDEA写拦截器的时候遇到点困惑,继承了HandlerInterceptor没有报错,我一直认为他会提醒,要重写方法.如下图 通过查资料,嗯,终于找到原因来,先来上HandlerIntercep ...

  4. http协议里定义的四种常见数据的post方法

    原文 https://blog.csdn.net/charlene0824/article/details/51199292 关于http协议里定义的四种常见数据的post方法,分别是: applic ...

  5. VIJOS-P1201 高低位交换

    洛谷 P1100 高低位交换 https://www.luogu.org/problemnew/show/P1100 JDOJ 1349: VIJOS-P1201 高低位交换 https://neoo ...

  6. 微信小程序入门笔记

    目录的作用: 1. pages目录: 该目录下存放所有的定义页面 2. utils目录: 该目录下存放定义的一些小功能组件 3. 根目录下app.js文件: 定义小程序对象, 执行小程序生命周期内的各 ...

  7. CSP2019&&AFO

    day-1 attack回来了,颓废,吃蛋糕. day-0 和attack继续车上颓废. 报道,志愿者胖乎乎的,学校很新. day-1 T1写完写T2,两小时T310分 出来发现,T2好像有个地方没路 ...

  8. 第02组 Beta冲刺(1/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  9. [LeetCode] 142. Linked List Cycle II 单链表中的环之二

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...

  10. .Net Core 基于CAP框架的事件总线

    .Net Core 基于CAP框架的事件总线 CAP 是一个在分布式系统中(SOA,MicroService)实现事件总线及最终一致性(分布式事务)的一个开源的 C# 库,她具有轻量级,高性能,易使用 ...