html5 canvas文字涂鸦电子签名板代码

来源:https://www.sucaihuo.com/js/3758.html 2018-06-20 11:38浏览(1131) 收藏

一款非常简单的html5 canvas文字涂鸦电子签名板代码,可以将你的作品输出图片。
html5 canvas文字涂鸦电子签名板代码
分类:html5 > canvas 难易:中级
查看演示 下载资源: 33 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" charset="utf-8">
	mui.plusReady(function() {
		plus.screen.lockOrientation('landscape-secondary');
	});
	$(document).ready(function() {
		$("#signature").jSignature()
	});
	document.getElementById("clear").addEventListener('tap', function() {
		$("#signature").jSignature("reset");
		$("#pic")[0].innerHTML = '';
	});
	document.getElementById("save").addEventListener('tap', function() {
		var datapair = $("#signature").jSignature("getData", "image");
		var array = datapair.splice(",");
		mui.toast(array[1]);
	});
	document.getElementById("export").addEventListener('tap', function() {
		var datapair = $("#signature").jSignature("getData", "image");
		var i = new Image();
		i.src = "data:" + datapair[0] + "," + datapair[1];
		$(i).appendTo($("#pic"));
	});
</script>
评论9
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 8楼
    09-02 10:32
    u***3
    麻烦问一下可以实现手机端的手写签名吗?
  • 头像 7楼
    07-09 09:40
    u***゜
    效果可以,就是我写的不好看- -
  • 头像 6楼
    06-21 12:06
    u***5
    效果不错的 就是我用的时候不太好看
  • 头像 5楼
    06-21 10:17
    1***秀
    这个感觉还蛮有点意思
  • 头像 4楼
    06-21 08:39
    舒***畅
    比较有趣的功能,赞一个!
  • 头像 3楼
    06-21 08:35
    n***7
    功能很牛逼啊、、、!!!
  • 头像 板凳
    06-20 20:01
    宝***志
    挺好玩的功能,学习一下
  • 头像 椅子
    06-20 15:02
    c***e
    这效果很牛逼!
  • 头像 沙发
    06-20 14:32
    u***゜
    效果很帅气,可以学习。
1 2