html画布签名,移动端画布签名.html

h5 demo

clear

var canvas = document.getElementById('canvas');

canvas.addEventListener('mousemove', onMouseMove, false);

canvas.addEventListener('mousedown', onMouseDown, false);

canvas.addEventListener('mouseup', onMouseUp, false);

canvas.addEventListener('touchstart', onMouseDown, false);

canvas.addEventListener('touchmove', onMouseMove, false);

canvas.addEventListener('touchend', onMouseUp, false)

canvas.height = 500;

canvas.width = getWidth() - 25;

var ctx = canvas.getContext('2d');

ctx.lineWidth = 3.0; // 设置线宽

ctx.strokeStyle = "#fc1741"; // 设置线的颜色

var flag = false;

function onMouseMove(evt) {

evt.preventDefault();

if (flag) {

var p = pos(evt);

ctx.lineTo(p.x, p.y);

ctx.lineWidth = 6.0; // 设置线宽

ctx.shadowColor = "#fc1741";

ctx.shadowBlur = 1;

//ctx.shadowOffsetX = 6;

ctx.stroke();

}

}

function onMouseDown(evt) {

evt.preventDefault();

ctx.beginPath();

var p = pos(evt);

ctx.moveTo(p.x, p.y);

flag = true;

}

function onMouseUp(evt) {

evt.preventDefault();

flag = false;

}

var clear = document.getElementById('c');

clear.addEventListener('click', function () {

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

}, false);

function pos(event) {

var x, y;

if (isTouch(event)) {

x = event.touches[0].pageX;

y = event.touches[0].pageY;

} else {

x = event.layerX;

y = event.layerY;

}

return {

x: x,

y: y

};

}

function isTouch(event) {

var type = event.type;

if (type.indexOf('touch') >= 0) {

return true;

} else {

return false;

}

}

function getWidth() {

var xWidth = null;

if (window.innerWidth !== null) {

xWidth = window.innerWidth;

} else {

xWidth = document.body.clientWidth;

}

return xWidth;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史