html5canvas 實現簽名效果 附上代碼 僅供參考


css 代碼

html,
body {
/* 重置默認樣式 */
margin: 0;
padding: 0;
}

html,
body,
#mycanvas {
width: 100%;
height: 100%;
overflow: hidden;
}

html代碼

<div id="mycanvas">
<canvas id="canvas"></canvas>
</div>

js代碼

document.body.addEventListener('touchstart', function() {
event.preventDefault(); //手指滑動時,瀏覽器會上下左右翻屏
});
var oCanvas = document.getElementById("canvas");
oCanvas.width = document.body.clientWidth;
oCanvas.height = document.body.clientHeight;
var cxt = oCanvas.getContext("2d");
cxt.lineWidth = 5;
var posX = 0; //x坐標
var posY = 0; //y坐標
var position = null;

//手指觸摸屏幕可記錄此時的位置作為起點
oCanvas.addEventListener("touchstart", function() {
posX = event.changedTouches[0].clientX;
posY = event.changedTouches[0].clientY;

cxt.moveTo(posX, posY);
});

//手指屏滑動畫線
oCanvas.addEventListener("touchmove", function() {
posX = event.changedTouches[0].clientX;
posY = event.changedTouches[0].clientY;
cxt.lineTo(posX, posY);
cxt.stroke();
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM