Recentemente, a empresa está trabalhando em uma função de assinatura, que utiliza principalmente a função de desenho de linha da tela combinada com eventos de toque móvel.
A parte js é assim:
window.onload = function() { new lineCanvas({ el: document.getElementById(canvas),//desenhe o div pai da tela clearEl: document.getElementById(clearCanvas),//botão Limpar saveEl: document.getElementById(saveCanvas) ,//Botão Salvar // largura da linha: 1, // Espessura da linha, opcional // cor: preto, // Cor da linha, opcional // background:#ffffff//Fundo da linha, opcional});};function lineCanvas(obj) { this.linewidth = 1; this.color = #000000; [i] = obj[i] }; this.canvas = document.createElement(canvas); = this.canvas.getContext(2d); this.canvas.width = this.el.clientWidth; this.canvas.height = this.el.clientHeight; 0, 0, this.canvas.width, this.canvas.width); this.cxt.strokeStyle = this.color; this.cxt.lineWidth = this.linewidth; this.cxt.lineCap = round; //Começa a desenhar this.canvas.addEventListener(touchstart, function(e) { this.cxt.beginPath(); this.cxt.moveTo(e .changedTouches[0].pageX, e.changedTouches[0].pageY); }.bind(this), false); //Desenhando this.canvas.addEventListener(touchmove, function(e) { this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); this.cxt.stroke(); } .bind(this), false); //Termina o desenho this.canvas.addEventListener(touchend, function() { this.cxt.closePath(); }.bind(this), false); //Limpa a tela this.clearEl.addEventListener(click, function() { this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); } .bind(this), false); //Salve a imagem e transfira-a diretamente para base64 this.saveEl.addEventListener(click, function() { var imgBase64 = this.canvas.toDataURL(); console.log(imgBase64);
Esta é a renderização:
Anexar HTML e CSS
<div id=canvas> <p id=clearCanvas>Limpar</p> <p id=saveCanvas>Salvar</p></div>html,body{ largura: 100% altura: 100%;}#canvas{; largura: 100%; altura: 100%; posição: relativa;}#canvas canvas{ display: bloco;}#clearCanvas{ largura: 50% altura: 40px; altura da linha: 40px; alinhamento do texto: posição central: fundo absoluto: 0; borda: 1px sólido #DEDEDE; altura da linha: 40px; alinhamento do texto: posição central: fundo absoluto: 0; borda: 1px sólido; índice z: 1;}
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.