前言
业务中需要用户进行签字，如何让用户在手机端进行签字？
示例如下
代码已分享至gitee:
h5实现手写签字
创建一个html页面
jsignature inherits colors from parent element. text = pen color. background = background. (this works even when flash-based canvas emulation is used.)
display area:
modernizr.js
/* modernizr 2.5.2 (custom build) | mit & bsd
* build: http://www.modernizr.com/download/#-borderradius-csscolumns-canvas-touch-mq-cssclasses-addtest-teststyles-testprop-testallprops-prefixes-domprefixes-fullscreen_api
*/
;window.modernizr = function(a, b, c) {
function a(a) {
j.csstext = a
}
function b(a, b) {
return a(m.join(a ";") (b || ""))
}
function c(a, b) {
return typeof a === b
}
function d(a, b) {
return !!~("" a).indexof(b)
}
function e(a, b) {
for (var d in a)
if (j[a[d]] !== c)
return b == "pfx" ? a[d] : !0;
return !1
}
function f(a, b, d) {
for (var e in a) {
var f = b[a[e]];
if (f !== c)
return d === !1 ? a[e] : c(f, "function") ? f.bind(d || b) : f
}
return !1
}
function g(a, b, c) {
var d = a.charat(0).touppercase() a.substr(1)
, e = (a " " o.join(d " ") d).split(" ");
return c(b, "string") || c(b, "undefined") ? e(e, b) : (e = (a " " p.join(d " ") d).split(" "),
f(e, b, c))
}
var d = "2.5.2", e = {}, f = !0, g = b.documentelement, h = "modernizr", i = b.createelement(h), j = i.style, k, l = {}.tostring, m = " -webkit- -moz- -o- -ms- ".split(" "), n = "webkit moz o ms", o = n.split(" "), p = n.tolowercase().split(" "), q = {}, r = {}, s = {}, t = [], u = t.slice, v, w = function(a, c, d, e) {
var f, i, j, k = b.createelement("div"), l = b.body, m = l ? l : b.createelement("body");
if (parseint(d, 10))
while (d--)
j = b.createelement("div"),
j.id = e ? e[d] : h (d 1),
k.appendchild(j);
return f = ["", ""].join(""),
k.id = h,
m.innerhtml = f,
m.appendchild(k),
l || g.appendchild(m),
i = c(k, a),
l ? k.parentnode.removechild(k) : m.parentnode.removechild(m),
!!i
}, x = function(b) {
var c = a.matchmedia || a.msmatchmedia;
if (c)
return c(b).matches;
var d;
return w("@media " b " { #" h " { position: absolute; } }", function(b) {
d = (a.getcomputedstyle ? getcomputedstyle(b, null) : b.currentstyle)["position"] == "absolute"
}),
d
}, y = {}.hasownproperty, z;
!c(y, "undefined") && !c(y.call, "undefined") ? z = function(a, b) {
return y.call(a, b)
}
: z = function(a, b) {
return b in a && c(a.constructor.prototype[b], "undefined")
}
,
function.prototype.bind || (function.prototype.bind = function(b) {
var c = this;
if (typeof c != "function")
throw new typeerror;
var d = u.call(arguments, 1)
, e = function() {
if (this instanceof e) {
var a = function() {};
a.prototype = c.prototype;
var f = new a
, g = c.apply(f, d.concat(u.call(arguments)));
return object(g) === g ? g : f
}
return c.apply(b, d.concat(u.call(arguments)))
};
return e
}
);
var h = function(c, d) {
var f = c.join("")
, g = d.length;
w(f, function(c, d) {
var f = b.stylesheets[b.stylesheets.length - 1]
, h = f ? f.cssrules && f.cssrules[0] ? f.cssrules[0].csstext : f.csstext || "" : ""
, i = c.childnodes
, j = {};
while (g--)
j[i[g].id] = i[g];
e.touch = "ontouchstart"in a || a.documenttouch && b instanceof documenttouch || (j.touch && j.touch.offsettop) === 9
}, g, d)
}([, ["@media (", m.join("touch-enabled),("), h, ")", "{#touch{top:9px;position:absolute}}"].join("")], [, "touch"]);
q.canvas = function() {
var a = b.createelement("canvas");
return !!a.getcontext && !!a.getcontext("2d")
}
,
q.touch = function() {
return e.touch
}
,
q.borderradius = function() {
return g("borderradius")
}
,
q.csscolumns = function() {
return g("columncount")
}
;
for (var i in q)
z(q, i) && (v = i.tolowercase(),
e[v] = q[i](),
t.push((e[v] ? "" : "no-") v));
return e.addtest = function(a, b) {
if (typeof a == "object")
for (var d in a)
z(a, d) && e.addtest(d, a[d]);
else {
a = a.tolowercase();
if (e[a] !== c)
return e;
b = typeof b == "function" ? b() : b,
g.classname = " " (b ? "" : "no-") a,
e[a] = b
}
return e
}
,
a(""),
i = k = null,
e._version = d,
e._prefixes = m,
e._domprefixes = p,
e._cssomprefixes = o,
e.mq = x,
e.testprop = function(a) {
return e([a])
}
,
e.testallprops = g,
e.teststyles = w,
g.classname = g.classname.replace(/(^|\s)no-js(\s|$)/, "$1$2") (f ? " js " t.join(" ") : ""),
e
}(this, this.document),
modernizr.addtest("fullscreen", function() {
for (var a = 0; a < modernizr._domprefixes.length; a )
if (document[modernizr._domprefixes[a].tolowercase() "cancelfullscreen"])
return !0;
return !!document.cancelfullscreen || !1
});
运行测试用例
到此这篇关于html5手写签名的实现示例的文章就介绍到这了,更多相关html5手写签名内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
