我們先準(zhǔn)備好準(zhǔn)備使用的html頁面和一些jSignature的簡單的初始化事情：
<style>
#signature{
transform:rotate(90deg);
}
</style>
</head>
<body>
<div id="image"></div>
<button onclick="jSignatureTest()">確定</button>
<div id="signature"></div>
<!-- 這里你需要找一個jquery文件在jSignature之前引用 -->
<script src="../jquery.min.js"></script>
<script src="jSignature.js"></script>
<script>
$(function() {
$("#signature").jSignature({'UndoButton':true,'height':'100vw','width':'100vh'})
})
//輸出簽名圖片
function jSignatureTest(){
//將畫布內(nèi)容轉(zhuǎn)換為圖片
var datapair = $("#signature").jSignature("getData", "image");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
$(i).appendTo($("#image")); // append the image (SVG) to DOM.
}
</script>
然后，好像沒什么好說的。。。
直接去改jSignature.js的源碼吧。
var apinamespace = 'jSignature'
//在下面添加一個獲取屏幕寬度的代碼
var windowWidth = document.documentElement.clientWidth;
我們即使沒有自己寫過canvas的基礎(chǔ)代碼，但應(yīng)該都知道它的幾個點、線、曲線...等的幾個canvas操作代碼（moveTo()、lineTo()等），一搜，就定位到basicDot、basicLine、basicCurve的幾個方法，然后這樣這樣子一改：
var basicDot = function(ctx, y, x, size){
var fillStyle = ctx.fillStyle;
ctx.fillStyle = ctx.strokeStyle;
ctx.fillRect(x + size / -2 , windowWidth - y + size / -2, size, size);
ctx.fillStyle = fillStyle;
}
, basicLine = function(ctx, starty, startx, endy, endx){
ctx.beginPath();
ctx.moveTo(startx, windowWidth - starty);
ctx.lineTo(endx, windowWidth - endy);
ctx.closePath();
ctx.stroke();
}
, basicCurve = function(ctx, starty, startx, endy, endx, cp1y, cp1x, cp2y, cp2x){
ctx.beginPath();
ctx.moveTo(startx, windowWidth - starty);
ctx.bezierCurveTo(cp1x, windowWidth - cp1y, cp2x, windowWidth - cp2y, endx, windowWidth - endy);
ctx.closePath();
ctx.stroke();
}
完成了。
