最近在做项目，在做电子签章的时候，需要用到电子签名，下面是用JS进行手绘签名：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手写签名</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.canvas-box{width: 500px; margin: 50px auto;}
#canvas{width: 500px; height: 200px; border: 1px solid red;}
#qmimg{border: 1px solid red;}
</style>
</head>
<body>
<div class="canvas-box">
<button id="btn_submit">提交</button>
<button id="btn_clear">清除</button>
<br><br>
<div id="canvasDiv" ></div>
<br><br>
<img id="qmimg" />
</div>
<script type="text/javascript">
function onDocumentTouchStart( event ) {
if( event.touches.length == 1 ) {
event.preventDefault();
var now = new Date().getTime();
if ( now - timeOfLastTouch < 250 ) {
reset();
return;
}
timeOfLastTouch = now;
mouseX = event.touches[ 0 ].pageX;
mouseY = event.touches[ 0 ].pageY;
isMouseDown = true;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX;
mouseY = event.touches[ 0 ].pageY;
}
}
function onDocumentTouchEnd( event ) {
if ( event.touches.length == 0 ) {
event.preventDefault();
isMouseDown = false;
}
}
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
var canvasWidth = 500;
var canvasHeight = 200;
document.addEventListener( 'touchmove', onDocumentTouchMove, false);
var point = {};
point.notFirst = false;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext("2d");
canvas.addEventListener("touchstart", function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
canvas.addEventListener("touchend", function(e){
paint = false;
});
canvas.addEventListener("touchmove", function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
canvas.addEventListener("mousedown", function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
canvas.addEventListener("mousemove", function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
canvas.addEventListener("mouseup", function(e){
paint = false;
});
canvas.addEventListener("mouseleave", function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging){
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
//canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 2;
while (clickX.length > 0 ) {
point.bx = point.x;
point.by = point.y;
point.x = clickX.pop();
point.y = clickY.pop();
point.drag = clickDrag.pop();
context.beginPath();
if (point.drag && point.notFirst) {
context.moveTo(point.bx, point.by);
} else {
point.notFirst = true;
context.moveTo(point.x - 1, point.y);
}
context.lineTo(point.x, point.y);
context.closePath();
context.stroke();
}
}
var clear = document.getElementById("btn_clear");
var submit = document.getElementById("btn_submit");
clear.addEventListener("click", function(){
canvas.width = canvas.width;
});
submit.addEventListener("click", function(){
document.getElementById("qmimg").setAttribute('src',canvas.toDataURL("image/png"));
});
</script>
</body>
</html>
打完收工！
标签：function,canvas,point,js,---,addEventListener,var,手绘,event From： https://www.cnblogs.com/e0yu/p/17877393.html