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();
});