html 手写签名撤销,[转]H5 canvas手写签名

痛定思痛。 2022-10-10 06:29 207阅读 0赞

手写签名

html,body\{

margin: 0;

padding: 0;

.saveimg\{

text-align: center;

.saveimgs span\{

display: inline-block;

margin-top:5px;

清空画板

Line width :

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");

// console.log(c)

// console.log(c2)

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 = "![from canvas][]";

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

[from canvas]:

html 手写签名撤销,[转]H5 canvas手写签名

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 android手写签名库android-signaturepad

相关制作手写签名

相关 vue 实现手写电子签名-vue-esign

相关 MATLAB 实现电子版的手写签名

相关 html 手写签名撤销,[转]H5 canvas手写签名

相关 vue3手写签名

相关手写签名插件—jSignature

相关手写签名的实现

相关【微信小程序canvas】实现小程序手写板用户签名(附代码)

相关 uni-app通过canvas实现手写签名