<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"/> <title>手写签名</title> <style type="text/css"> html,body{ margin: 0; padding: 0; } .saveimg{ text-align: center; } .saveimgs span{ display: inline-block; margin-top:5px; } </style> </head> <body> <div align="center"> <canvas id="myCanvas" width="500" height="300" style="border:1px solid #6699cc"></canvas> <div class="control-ops control"> <button type="button" class="btn btn-primary" οnclick="javascript:clearArea();return false;">清空画板</button> Line width : <select id="selWidth" οnchange="aaa()"> <option value="1">1</option> <option value="3" selected="selected">3</option> <option value="5">5</option> <option value="7">7</option> <option value="9">9</option> <option value="11">11</option> </select> Color : <select id="selColor" οnchange="aaa2()"> <option value="black" selected="selected">black</option> <option value="blue">blue</option> <option value="red">red</option> <option value="green">green</option> <option value="yellow">yellow</option> <option value="gray">gray</option> </select> <button type="button" class="saveimg" οnclick="javascript:saveImageInfo();return false;">保存</button> </div> <div class="saveimgs"></div> </div> </body> <script type="text/javascript"> 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 = "<img src='"+image+"' alt='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); } } </script> </html>