请问有没有兼容ios手机的canvas手机签名代码?可以生成用户签名的图片传给后端的。
网友回复
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> #canvas { background: white; height: 300px; width: 300px; } </style> </head> <body> <canvas id="canvas"> </canvas> <input type="button" class="but1" value="重新签名" /> <input type="button" class="but2" value="提交签名" /> <img id="sigimg" src="" /> <script> var canvas = document.getElementById("canvas"); //动态设置宽高 canvas.width = 400; canvas.height = 300; var content = canvas.getContext("2d"); //设置画笔的样式 content.strokeStyle = "#000"; content.lineWidth = 1; content.lineCap = 'round'; content.lineJoin = 'round'; content.shadowBlur = 1; content.shadowColor = '#000'; content.beginPath(); //点击 canvas.addEventListener("touchstart", function(e) { content.beginPath(); var touch = e.targetTouches[0]; var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; content.moveTo(x, y); }); //移动 canvas.addEventListener("touchmove", function(event) { event.preventDefault(); var touch = event.targetTouches[0]; var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; content.lineTo(x, y); content.stroke(); }); //结束 canvas.addEventListener("touchend", function(event) { content.closePath(); $('.but2').attr('disabled', false); }); //清除画布 .but1元素 点击事件 document.querySelector(".but1").onclick = function() { content.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight); } document.querySelector(".but2").onclick = function() { var data = canvas.toDataURL('image/png'); $('#sigimg').attr('src', data); } </script> </body> </html>