Baru-baru ini, perusahaan sedang mengerjakan fungsi tanda tangan, yang sebagian besar menggunakan fungsi menggambar garis kanvas yang dikombinasikan dengan acara sentuh seluler.
Bagian jsnya seperti ini:
window.onload = function() { new lineCanvas({ el: document.getElementById(canvas),//Gambar div induk kanvas clearEl: document.getElementById(clearCanvas),//Hapus tombol saveEl: document.getElementById(saveCanvas) ,//Tombol simpan// lebar garis:1,//Ketebalan garis, opsional// warna: hitam,//Warna garis, opsional// latar belakang:#ffffff//Latar belakang garis, opsional});};function lineCanvas(obj) { this.linewidth = 1; this.color = #000000; this.background = #ffffff; [i] = obj[i]; }; this.kanvas = dokumen.createElement(kanvas); this.el.appendChild(ini.kanvas); = ini.kanvas.getContext(2d); ini.kanvas.lebar = ini.el.clientWidth; ini.kanvas.tinggi = ini.el.clientHeight; ini.cxt.fillStyle = ini.latar belakang; 0, 0, ini.kanvas.lebar, ini.kanvas.lebar); ini.cxt.strokeStyle = ini.warna; this.cxt.lineWidth = this.linewidth; this.cxt.lineCap = bulat; //Mulai menggambar this.canvas.addEventListener(touchstart, function(e) { this.cxt.beginPath(); this.cxt.moveTo(e .changedTouches[0].pageX, e.changedTouches[0].pageY); //Menggambar this.canvas.addEventListener(touchmove, function(e) { this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); this.cxt.stroke(); } .bind(ini), false); //Akhiri menggambar this.canvas.addEventListener(touchend, function() { this.cxt.closePath(); }.bind(ini), false); //Hapus kanvas this.clearEl.addEventListener(klik, function() { this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); } .bind(this), false); //Simpan gambar dan transfer langsung ke base64 this.saveEl.addEventListener(click, function() { var imgBase64 = this.kanvas.toDataURL(); console.log(imgBase64);Ini renderingnya:
Lampirkan html dan css
<div id=canvas> <p id=clearCanvas>Hapus</p> <p id=saveCanvas>Simpan</p></div>html,body{ lebar: 100% tinggi: 100%;}#canvas{ lebar: 100%; tinggi: 100%; posisi: relatif;}#kanvas kanvas{ tampilan: blok;}#clearCanvas{ lebar: 50%; tinggi garis: 40px; perataan teks: tengah; posisi: absolut; bawah: 0; kiri: 0; batas: 1px solid #DEDEDE; tinggi garis: 40px; perataan teks: tengah; posisi: absolut; bawah: 0; kanan: 0; batas: 1px padat #DEDEDE; indeks-z: 1;}Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.