Recientemente, la compañía está trabajando en una función de firma, que utiliza principalmente la función de dibujo de líneas de lienzo combinada con eventos táctiles móviles.
La parte js es así:
window.onload = function() { new lineCanvas({ el: document.getElementById(canvas),//Dibujar el div principal del lienzo clearEl: document.getElementById(clearCanvas),//Botón Borrar saveEl: document.getElementById(saveCanvas) ,//Botón Guardar// ancho de línea:1,//Grosor de línea, opcional// color:negro,//Color de línea, opcional// background:#ffffff//Fondo de línea, opcional});};function lineCanvas(obj) { this.linewidth = 1; this.color = #000000; [i] = obj[i]; }; este.canvas = document.createElement(canvas); este.el.appendChild(este.canvas); = this.canvas.getContext(2d); this.canvas.width = this.el.clientWidth; this.canvas.height = this.el.clientHeight; 0, 0, este.canvas.width, este.canvas.width); este.cxt.strokeStyle = este.color; this.cxt.lineWidth = this.linewidth; this.cxt.lineCap = round; //Comienza a dibujar this.canvas.addEventListener(touchstart, function(e) { this.cxt.beginPath(); this.cxt.moveTo(e) .changedTouches[0].pageX, e.changedTouches[0].pageY }.bind(this), false); //Dibujando this.canvas.addEventListener(touchmove, function(e) { this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); this.cxt.stroke(); } .bind(this), false); //Finalizar el dibujo this.canvas.addEventListener(touchend, function() { this.cxt.closePath(); }.bind(this), false); // Limpiar el lienzo this.clearEl.addEventListener(click, function() { this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); } .bind(this), false); //Guarda la imagen y transfiérela directamente a base64 this.saveEl.addEventListener(click, function() { var imgBase64 = this.canvas.toDataURL(); console.log(imgBase64); }.bind(esto), falso);};Esta es la representación:
Adjuntar html y css
<div id=canvas> <p id=clearCanvas>Borrar</p> <p id=saveCanvas>Guardar</p></div>html,body{ ancho: 100% alto: 100%;}#canvas{ ancho: 100%; alto: 100%; posición: relativa;}#canvas canvas{ display: block;}#clearCanvas{ ancho: 50%; altura de línea: 40px; alineación de texto: centro; posición: absoluta; abajo: 0; izquierda: 0; borde: 1px sólido #DEDEDE; altura de línea: 40 px; alineación de texto: centro; posición: absoluta; abajo: 0; borde: 1 px sólido #DEDEDE; índice z: 1;}Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.