插件地址

http://bencentra.github.io/jq-signature/

采用技术

  • jq-signature.min.js
  • Developed using jQuery 2.1.4.
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="jquery.min.js"></script>

<script src="jq-signature.min.js"></script>

<script>

	$(function(){

		$('.js-signature').jqSignature();

	})

	function clearCanvas() {

		$('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');

		$('.js-signature').eq(1).jqSignature('clearCanvas');

		$('#saveBtn').attr('disabled', true);

	}

	function saveSignature() {

		$('#signature').empty();

		var dataUrl = $('.js-signature').jqSignature('getDataURL');

		var img = $('<img>').attr('src', dataUrl);

		$('#signature').append($('<p>').text("Here's your signature:"));

		$('#signature').append(img);

	}

	$('.js-signature').eq(1).on('jq.signature.changed', function() {

		$('#saveBtn').attr('disabled', false);

	});

</script>

</head>

<body>

<div class="js-signature" data-width="600" data-height="200" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>

			<p><button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">Clear Canvas</button> 

			<button id="saveBtn" class="btn btn-default" onclick="saveSignature();" >Save Signature</button></p>

<div id="signature">

				<p><em>Your signature will appear here when you click "Save Signature"</em></p>

			</div>

</body>

</html>

截图

HTML5 canvas 在线涂鸦的更多相关文章

  1. HTML5 canvas 在线画笔绘图工具（一）

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  2. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  3. html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. HTML5 canvas 在线画笔绘图工具（二）

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

  5. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

  6. html5 canvas 涂鸦画板

    html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100 ...

  7. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  8. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  9. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

随机推荐

  1. （错误）在VMmare中安装centos后不能联网

    一.问题 在VMmare中安装centos后不能联网 在Xshell无法连接centos 二.解决方法 2.1 点击Network Adapter 设置如下图所示,首先我们在虚拟机中将网络配置设置成N ...

  2. Django中使用Bootstrap----带view.py视图函数（也就是项目下的脚本文件）

    一.Django中使用Bootstrap 1.首先建立工程,建立工程请参照:https://www.cnblogs.com/effortsing/p/10394511.html 2.在Firstdja ...

  3. c-lodop的三个进程和一个服务介绍

    在windows任务管理器里,最新版可以看到有三个进程,例如安32位c-lodop的时候,有CLodopPrint32.exe.CLodopPrint32_backup.exe.CLodopServi ...

  4. 高级UI-符合MD的常用控件

    在Google提供的控件中,在support-design及v4,v7包中,存在着很多符合MD标准的控件,这里罗列出一些常用的控件 TextInputLayout 这个控件在作为输入框的时候是极其方便 ...

  5. go基础系列 第一章 go基础语法

    0.前言 1. go定义变量的几种方式 2. go内建变量类型 3. 常量的定义 4. go枚举 5. go的if语句 零. go语言的换行 go语言对换行很有讲究, 如果想换行,必须有一个逗号, 否 ...

  6. 创建SSH密钥

    Step1: 检查SSH密钥 首先,打开终端,输入以下指令,查看是否已经生成SSH密钥. cd ~/.ssh ls # Lists the files in your .ssh directory 在 ...

  7. mysql 数据库批量刷新表字段数据

    UPDATE a,bSET b.studentno = a.studentnumber WHERE b.studentno IS NULL AND a.p_id = b.p_id

  8. Soda Machine【差分+离散化】

    题目链接:https://ac.nowcoder.com/acm/contest/1106/A 题目大意: 1.一条长1e9的线段,每个节点都可以上色.给出n次操作,每次操作将[l, r]区间内的节点 ...

  9. oracle调用函数的方式

    --方法1.PLSQL代码块 SQL> set serveroutput onSQL> declare 2 v_sal emp_pl.sal%type; 3 begin 4 v_sal : ...

  10. python学习-19 字典

    字典dict 1.dic = {key:value,key:value} 字典有{ }括住,字典的value可以是任意值,字典的key的值不包括列表和字典 di = {"age": ...