html5+canvas实现支持触屏的签名插件教程

前言

大家在日常开发中使用该jQuery插件来制作在线签名，用户绘制的东西以图片的形式保存下来，非常方便实用。下面将实现支持的方法分享给大家，供大家参考学习，下面来一起看看详细的介绍吧。

方法如下：

使用该签名插件要引入jQuery和jq-signature.js文件。

rush:xhtml;">

HTML结构

rush:xhtml;">

<button id="clearBtn" onclick="clearCanvas();">Clear Canvas

Save Signature

<div id="signature">

初始化插件

rush:js;"> //页面加载完毕之后使用下面的方法来初始化该签名插件 $(document).on('ready',function() { $('.js-signature').jqSignature(); });

function clearCanvas() {
$('#signature').html('

Your signature will appear here when you click "Save Signature"

');
$('.js-signature').jqSignature('clearCanvas');
$('#saveBtn').attr('disabled',true);
}

function saveSignature() {
$('#signature').empty();
var dataUrl = $('.js-signature').jqSignature('getDataURL');
var img = $('').attr('src',dataUrl);
$('#signature').append($('

').text("Here's your signature:"));
$('#signature').append(img);
}

$('.js-signature').on('jq.signature.changed',function() {
$('#saveBtn').attr('disabled',false);
});

配置参数

下面是该签名插件的一些可用参数，这些参数可以同时在data-attributes上使用：

默认值300默认值100默认为'1px solid #AAAAAA'默认值为'#FFFFFF'默认值为#222222'默认值为1linewidth: 2});默认值false

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。