插件地址

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. PAT 甲级 1037 Magic Coupon (25 分) （较简单,贪心）

    1037 Magic Coupon (25 分)   The magic shop in Mars is offering some magic coupons. Each coupon has an ...

  2. 用Python做一个简单的小游戏

    学习总是枯燥的,对于Python小白的我来讲,更是乏味的.为了提高学习的兴趣,今天我就来写一个小程序练练手. 数字猜谜游戏相信大家都不陌生,A给出最小值最大值,B写一个该范围内的数,A猜测写下的是多少 ...

  3. Linux 安装环境初始化检查 安装Nginx

    一 .阿里云 centos 6.8 32 位裸环境 实现:Linux Nginx mysql php redis 查看当前安装的服务 [root@iZgahlk1l73998Z etc]# servi ...

  4. Python hashlib加密模块

    hashlib模块 简介: hashlib模块是一个提供了字符串加密功能的模块,包含MD5和SHA的加密算法.具体的加密支持有: MD5,sha1,sha224,sha256, sha384, sha ...

  5. POJ2449 【第k短路/A*】

    题目链接:http://poj.org/problem?id=2449 题目大意: 给出n个点,m条有向边,最后一行给出起点到终点的第k短路.求长度. 题解思路: 这是我第一道第k短路题以及A*算法的 ...

  6. Mac10.14.6安装Python3

    换了台新电脑, 记录一下Python3的安装过程. 1.检查现有版本的python. 因为Mac的系统以来python2, 所以python肯定是有的, 因为依赖, 所以安装了python3, 也不可 ...

  7. oracle 列合并成并用拼接符拼接 -- LISTAGG函数用法

    ==注:wm_concat(str1) 11g 后不支持使用== LISTAGG函数用法 select LISTAGG(name, ',') WITHIN GROUP (ORDER BY id) fr ...

  8. go 相关资源

    网站guide 官方文档 国内镜像 包下载 Golang标准库文档 Release History Getting Start 安装 1.下载binrary包(zip 解压后需要配置gopath, m ...

  9. Windows 下redis的安装和使用

    1.下载 Window 下载地址:https://github.com/MSOpenTech/redis/releases 查找版本对应的一个MSI或者zip文件下载 2.安装 MSI文件需要安装 z ...

  10. 制作一个centos+jdk8+tomcatd9镜像

    docker解析:     1.登录docker             docker ecex –it 容器名/容器id /bin/bash         例如:             dock ...