JavaScript實現(xiàn)移動端簽字功能
更新時間:2021年10月15日 11:54:03 作者:、蒙昧
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)移動端簽字功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)移動端簽字功能的具體代碼,供大家參考,具體內(nèi)容如下
一、html部分
<div class="mui-content-padded"> <div class="mui-inline"><font style="font-family: '微軟雅黑';font-size: 1.2rem;">驗收人簽字:</font></div> </div> <div class="mui-content-canvasDiv" style="overflow: hidden;"> <canvas id="myCanvas" width="660" height="360" style="border:1px solid #f2f2f2;"></canvas> <div class="saveimgs" id="saveImgDiv"></div> </div>
myCanvas是簽字的div,saveImgDiv是保存后回顯的div。
二、頁面初始化,添加div簽字功能
InitThis();
var mousePressed = false; var lastX, lastY; var ctx = document.getElementById('myCanvas').getContext("2d"); var c = document.getElementById("myCanvas"); var selected1, selected2; function InitThis() { // 觸摸屏 c.addEventListener('touchstart', function(event) { console.log(1) if(event.targetTouches.length == 1) { event.preventDefault(); // 阻止瀏覽器默認事件,重要 mousePressed = true; Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, false); } }, false); c.addEventListener('touchmove', function(event) { console.log(2) if(event.targetTouches.length == 1) { event.preventDefault(); // 阻止瀏覽器默認事件,重要 if(mousePressed) { Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, true); } } }, false); c.addEventListener('touchend', function(event) { console.log(3) if(event.targetTouches.length == 1) { event.preventDefault(); // 阻止瀏覽器默認事件,防止手寫的時候拖動屏幕,重要 mousePressed = false; } }, false); // 鼠標 c.onmousedown = function(event) { mousePressed = true; Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false); }; c.onmousemove = function(event) { if(mousePressed) { Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true); } }; c.onmouseup = function(event) { mousePressed = false; }; } function Draw(x, y, isDown) { if(isDown) { ctx.beginPath(); ctx.strokeStyle = selected2; ctx.lineWidth = selected1; ctx.lineJoin = "round"; ctx.moveTo(lastX, lastY); ctx.lineTo(x, y); ctx.closePath(); ctx.stroke(); } lastX = x; lastY = y; }
三、獲取圖片路徑放到saveImgDiv里,簽字回顯邏輯
var file = "http://10.1.31.173:8097/upload/" + iv[0].zjqm + "?v=" + new Date().getTime(); $("#saveImgDiv").append('<img src="'+ file + '" style="background:white" width="660" height="360">');
四、保存用戶簽名,可以放在保存提交成功的回調(diào)里
var saveimgs = document.getElementsByClassName("saveimgs")[0]; //保存簽名圖片 var image = c.toDataURL("image/png"); var ctximg = document.createElement("span"); ctximg.innerHTML = "<img src='" + image + "' alt='from canvas'/>"; if(saveimgs.getElementsByTagName('span').length >= 1) { var span_old = saveimgs.getElementsByTagName("span")[0]; saveimgs.replaceChild(ctximg,span_old) } else { saveimgs.appendChild(ctximg); }
效果
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JavaScript利用Canvas實現(xiàn)粒子動畫倒計時
粒子動畫就是頁面上通過發(fā)射許多微小粒子來表示不規(guī)則模糊物體。本文將利用canvas實現(xiàn)酷炫的粒子動畫倒計時,感興趣的小伙伴可以嘗試一下2022-12-12教你如何自定義百度分享插件以及bshare分享插件的分享按鈕
在項目中我們常用到百度分享插件或者bshare分享插件,雖然官方都有自定義按鈕的功能,但是畢竟還是只有少數(shù)幾種,我們?nèi)绾蝸碇谱饔凶约禾厣姆窒戆粹o呢?2014-06-06