ล่าสุดบริษัทกำลังทำงานเกี่ยวกับฟังก์ชันลายเซ็น ซึ่งส่วนใหญ่ใช้ฟังก์ชันการวาดเส้นแคนวาสรวมกับกิจกรรมระบบสัมผัสบนมือถือ
ส่วน js เป็นดังนี้:
window.onload = function() { new lineCanvas({ el: document.getElementById(canvas)//วาด div parent ของ canvas clearEl: document.getElementById(clearCanvas)//ปุ่ม Clear saveEl: document.getElementById(saveCanvas) ,//ปุ่มบันทึก// linewidth:1,//ความหนาของเส้น, ตัวเลือก// สี:สีดำ,//สีของเส้น, ตัวเลือก// พื้นหลัง:#ffffff//Line background, อุปกรณ์เสริม});};function lineCanvas(obj) { this.linewidth = 1; this.color = #000000; this.พื้นหลัง = #ffffff; for (var i in obj) { this [i] = obj[i]; }; this.canvas = document.createElement(ผ้าใบ); this.el.appendChild(this.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 = รอบ; // เริ่มวาด this.canvas.addEventListener (touchstart, function (e) { this.cxt.beginPath (); this.cxt.moveTo (e .changedTouches[0].pageX, e.changedTouches[0].pageY); }.bind(สิ่งนี้), เท็จ); // การวาด this.canvas.addEventListener (touchmove, function (e) { this.cxt.lineTo (e.changedTouches [0] .pageX, e.changedTouches [0] .pageY); this.cxt. stroke (); } .bind(this), false); //จบการวาด this.canvas.addEventListener(touchend, function() { this.cxt.closePath(); }.bind(this), false); //เคลียร์แคนวาส this.clearEl.addEventListener(คลิก, function() { this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); } .bind(this), false); //บันทึกรูปภาพและถ่ายโอนโดยตรงไปยัง base64 this.saveEl.addEventListener(click, function() { var imgBase64 = this.canvas.toDataURL(); console.log(imgBase64); }.bind(นี่), เท็จ);};นี่คือการเรนเดอร์:
แนบ html และ css
<div id=canvas> <p id=clearCanvas>ล้าง</p> <p id=saveCanvas>บันทึก</p></div>html,body{ ความกว้าง: 100%; ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมพันธ์;}#canvas canvas{ display: block;}#clearCanvas{ width: 50%; ความสูงบรรทัด: 40px; การจัดตำแหน่งข้อความ: กึ่งกลาง; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; เส้นขอบ: 1px ทึบ #DEDEDE; ความสูงบรรทัด: 40px; การจัดตำแหน่งข้อความ: กึ่งกลาง; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; เส้นขอบ: 1px ทึบ; ดัชนี z: 1;}ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network