插件地址

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. js下利用userData实现客户端保存表单数据

    对于多数网页制作的朋友,实现在客户端保存在网页表单上的信息,比较多的是采用Cookie技术来实现,这些功能例如:下拉列表框选择的选项,文本框输入的数据等. 事实上,我们可以利用微软DHTML默认行为中 ...

  2. c/c++编码规范(3)--google代码规范检测工具cpplint.py

    cpplint.py是来自google开源项目风格错误检测工具.它是一个python脚本,和google开源项目风格指南一同发布.下载地址:https://github.com/google/styl ...

  3. 前端nginx配置

    对nginx还是处于小白阶段,知道的只是简单基础,以下配置没有问题,已实现 文件:nginx-1.15.11\conf\nginx.conf 注释:# 后台接口 :location ^~ /geste ...

  4. 什么是挂载（mount）？

    官方文档是这么解释的: All files accessible in a Unix system are arranged in one big tree, the file hierarchy, ...

  5. python 字符串 - python基础入门(12)

    在 python变量 文章中我们对python变量做了一个简单的了解,整数/浮点数/bool值相对来讲都比较简单,今天详细在讲解一下关于字符串的内容,字符串俗称:str. 在本文会大量的使用print ...

  6. Alt+~,Alt+Tab

    Alt+~可以很方便的切换同一个软件中的内容. Alt+Tab可以很方便的切换不同软件之间的内容. 熟练使用,很方便.

  7. Vue.js与React的全面对比

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

  8. javascript策略模式的应用！

    最近在看<JavaScript设计模式与开发实践>这本书,受益匪浅,小记录一下书中的各个demo,加深理解: 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替 ...

  9. 如何理解Python中的None

    Python中的None是一个经常被用到的知识点,但是很多人对于None的内涵把握的还是不够精确,今天就和我一起好好理解下这个小知识点吧. 1.None表示空,但它不等于空字符串.空列表,也不等同于F ...

  10. ubuntu内lnmp相关操作命令

    LNMP状态管理命令: **LNMP状态管理:** sudo lnmp {start|stop|reload|restart|kill|status} **Nginx状态管理:**sudo /etc/ ...