html5采集手写签名,前端canvas手写签名（含移动端）

image.png

直接上代码

手写签名

html,

body {

margin: 0;

padding: 0;

}

.saveimg {

text-align: center;

}

.saveimgs span {

display: inline-block;

margin-top: 5px;

}

清空画板 Line width :

1

3

5

7

9

11

Color :

black

blue

red

green

yellow

gray

保存

var mousePressed = false;

var lastX, lastY;

var ctx = document.getElementById('myCanvas').getContext("2d");

var c = document.getElementById("myCanvas");

var control = document.getElementsByClassName("control")[0];

var saveimgs = document.getElementsByClassName("saveimgs")[0];

window.onload = function() {

InitThis();

}

function saveImageInfo() {

var image = c.toDataURL("image/png");

var ctximg = document.createElement("span");

ctximg.innerHTML = "";

if (saveimgs.getElementsByTagName('span').length >= 1) {

var span_old = saveimgs.getElementsByTagName("span")[0];

saveimgs.replaceChild(ctximg, span_old)

} else {

saveimgs.appendChild(ctximg);

}

// console.log(image)

}

var selected1, selected2;

function aaa() {

var sel = document.getElementById('selWidth');

var value = sel.selectedIndex;

return selected1 = sel[value].value;

}

function aaa2() {

var sel2 = document.getElementById('selColor');

var value = sel2.selectedIndex;

return selected2 = sel2[value].value;

}

function InitThis() {

// 触摸屏

c.addEventListener('touchstart', function(event) {

console.log(1)

if (event.targetTouches.length == 1) {

event.preventDefault(); // 阻止浏览器默认事件，重要

var touch = event.targetTouches[0];

mousePressed = true;

Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);

}

}, false);

c.addEventListener('touchmove', function(event) {

console.log(2)

if (event.targetTouches.length == 1) {

event.preventDefault(); // 阻止浏览器默认事件，重要

var touch = event.targetTouches[0];

if (mousePressed) {

Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);

}

}

}, false);

c.addEventListener('touchend', function(event) {

console.log(3)

if (event.targetTouches.length == 1) {

event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要

// var touch = event.targetTouches[0];

mousePressed = false;

}

}, false);

/*c.addEventListener('touchcancel', function (event) {

console.log(4)

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;

}

function clearArea() {

// Use the identity matrix while clearing the canvas

ctx.setTransform(1, 0, 0, 1, 0, 0);

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

// 清除签名图片

if (saveimgs.getElementsByTagName('span').length >= 1) {

var clearImg = saveimgs.getElementsByTagName('span')[0];

saveimgs.removeChild(clearImg);

}

}