บทความนี้จะแนะนำ:
ชื่อ: กระดานวาดภาพอัจฉริยะ
กองเทคโนโลยี: HTML5, CSS3, JavaScript, อุปกรณ์เคลื่อนที่
คำอธิบายฟังก์ชัน:
ที่อยู่ตัวอย่างที่อยู่โครงการ
ดูตัวอย่าง
ตัวอย่างพีซี:
ดูตัวอย่างบนมือถือ:
หลังจากอ่านตัวอย่างด้านบนและสัมผัสประสบการณ์ Smart Drawing Pad แล้ว ฉันคิดว่าไม่เป็นไร อย่าลืมยกนิ้วให้ ไม่ว่าคุณจะตื่นเต้นมากหรือไม่ก็ตาม ยังไงซะฉันก็รู้สึกตื่นเต้นมาก บรรลุผลสำเร็จของโครงการแล้ว ฉันได้พูดไปแล้ว ไร้สาระมากมาย ตอนนี้คุณสามารถเริ่มพิมพ์โค้ดเพื่อให้ได้เอฟเฟกต์ที่คุณต้องการ! - -
หมายเหตุ: เอฟเฟกต์ของโปรเจ็กต์ต่อไปนี้ส่วนใหญ่เกี่ยวข้องกับ JavaScript ต่อไปนี้เป็นเพียง โค้ดที่ให้แนวคิดในการนำไปใช้ ไม่ใช่โค้ดทั้งหมด
3. บรรลุผลสำเร็จของโครงการทีละขั้นตอน(1) หน้าการวิเคราะห์
จาก แผนภาพกรณีการใช้งาน เรารู้ว่าผู้ใช้สามารถใช้ฟังก์ชันใดบ้างในการเข้าสู่เว็บไซต์ของเรา
ผู้ใช้ทำอะไรได้บ้าง:
(2) เค้าโครง HTML
เมื่อฉันเขียน html ฉันแนะนำไฟล์ css และ js
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA - เนื้อหาที่เข้ากันได้=ie=edge> <title>แผ่นวาดภาพอัจฉริยะ</title> <link rel=ไอคอนทางลัด href=./image/favicon.png type=image/x-icon> <link rel=stylesheet href=./css/style.css></head><body> <canvas id=canvas></canvas> <div class=bg-btn></ div> <div class=color-group id=bgGroup> <h3>เลือกสีพื้นหลัง:</h3> <ul class=clearfix> <li class=bgcolor-item style=สีพื้นหลัง: สีฟ้า;></li> <li class=bgcolor-item style=สีพื้นหลัง: สีดำ;></li> <li class=bgcolor-item style=สีพื้นหลัง: #FF3333;></li> <li class=bgcolor-item style=สีพื้นหลัง: #0066FF;></li> <li class=bgcolor-item style=สีพื้นหลัง: #FFFF33;></li> <li class=bgcolor-item style=สีพื้นหลัง: #33CC66;></li> <li class=bgcolor-item style=สีพื้นหลัง: สีเทา;></li> <li class=bgcolor-item style=พื้นหลัง- สี: #F34334;></li> <li class=bgcolor-item style=สีพื้นหลัง: #fff;box-shadow: 0 1px 2px 0 rgba(32,33,36,0.28);></li> <li class=bgcolor-item style=สีพื้นหลัง: #9B27AC;></li> <li class=bgcolor-item style=สีพื้นหลัง: #4CB050;></li> <li class=bgcolor-item style=สีพื้นหลัง: #029688;></li> </ul> <i class=closeBtn></i> </div> <div class=tools> <div class=container> <button class=save id=save <button class=brush active id=brush <button class=eraser id=eraser < ปุ่ม class=clear id=clear <ปุ่ม class=undo id=undo <button class=redo id=redo </div> </div> <div class=pen-detail id=penDetail> <i class=closeBtn></i> <p>ขนาดปากกา</p> <span class=circle-box><i id=thickness></i></span> <ประเภทอินพุต=ช่วง id=range1 min=1 max=10 value=1> <p>สีปากกา</p> <ul class=pen-color clearfix> <li class=color-item สไตล์ที่ใช้งาน=สีพื้นหลัง: สีดำ;></ ลี> <li class=color-item style=สีพื้นหลัง: #FF3333;></li> <li class=color-item style=สีพื้นหลัง: #99CC00;></li> <li class=color-item style=พื้นหลัง -สี: #0066FF;></li> <li class=color-item style=สีพื้นหลัง: #FFFF33;></li> <li class=color-item style=สีพื้นหลัง: #33CC66;></li> </ul> <p>ความทึบ</p> <i class=showOpacity></i> <ประเภทอินพุต=ช่วง id=range2 นาที=1 สูงสุด=10 ค่า=1> </li div> <script src=./js/main.js></script></body></html>
(3) ใช้ CSS เพื่อตกแต่งอินเทอร์เฟซให้สวยงาม
โค้ด CSS สามารถทำให้อินเทอร์เฟซสวยงามตามนิสัยส่วนตัว ดังนั้น ฉันจะไม่เขียนโค้ด CSS ที่นี่ คุณสามารถดู โค้ดโปรเจ็กต์ ได้โดยตรงหรือตรวจสอบองค์ประกอบจากเครื่องมือของนักพัฒนา หากคุณมีคำถามใด ๆ คุณสามารถพูดคุยกับฉันได้เป็นการส่วนตัว ฉันไม่คิดว่ามันเป็นปัญหาใหญ่
(4) ใช้ JS เพื่อใช้งานฟังก์ชั่นเฉพาะของโครงการ
1. การเตรียมการ
ขั้นแรกให้เตรียมคอนเทนเนอร์ซึ่งเป็นกระดานวาดภาพ คอนเทนเนอร์นี้เขียนด้วย HTML ก่อนหน้า นี่เป็นเรื่องไร้สาระล้วนๆ
<canvas id=canvas></canvas>
จากนั้นเริ่มต้น js
ให้ canvas = document.getElementById('canvas');ให้บริบท = canvas.getContext('2d'); ฉันวางแผนที่จะทำให้อาร์ตบอร์ดเต็มหน้าจอ ดังนั้นต่อไปฉันจะกำหนดความกว้างและความสูงของ canvas
ให้ pageWidth = document.documentElement.clientWidth; ให้ pageHeight = document.documentElement.clientHeight;canvas.width = pageWidth;canvas.height = pageHeight;
เนื่องจาก IE บางตัวไม่รองรับ canvas หากเราต้องการเข้ากันได้กับ IE เราสามารถสร้าง canvas จากนั้นเริ่มต้นด้วย excanvas และเพิ่ม exCanvas.js สำหรับ IE เราไม่พิจารณา IE อย่างชัดเจนที่นี่
แต่เมื่อฉันเปลี่ยนหน้าต่างเบราว์เซอร์บนคอมพิวเตอร์ กระดานวาดภาพไม่สามารถปรับขนาดได้ สารละลาย:
// อย่าลืมเรียกใช้ฟังก์ชัน autoSetSize(){ canvasSetSize(); // เมื่อเรียกใช้ฟังก์ชันนี้ ความกว้างและความสูงของผืนผ้าใบจะถูกตั้งค่าก่อนเป็นฟังก์ชัน canvasSetSize(){ la pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; canvas.width = pageWidth; canvas.height = pageHeight; หลังจากที่ขนาดหน้าต่างเปลี่ยนแปลง เหตุการณ์การปรับขนาดจะถูกทริกเกอร์เพื่อรีเซ็ตความกว้างและความสูงของหน้าต่างแคนวาส.onresize = function(){ canvasSetSize( }}2. ตระหนักถึงหน้าที่ของการวาดภาพ
แนวคิดในการนำไปปฏิบัติ: ฟังเหตุการณ์ของเมาส์และใช้เมธอด drawLine() เพื่อดึงข้อมูลที่บันทึกไว้
painting = falsemousedown ) ให้ตั้งค่า painting เป็น true เพื่อระบุว่ากำลังทาสีและเมาส์ยังไม่ถูกปล่อย บันทึกการคลิกเมาส์mousemove ) หากเมาส์เคลื่อนที่เร็วเกินไป เบราว์เซอร์จะไม่สามารถตามความเร็วในการวาดได้ และช่องว่างจะปรากฏขึ้นระหว่างจุดต่างๆ ดังนั้นเราจึงจำเป็นต้องเชื่อมต่อจุดที่วาดด้วยเส้น ( lineTo() )mouseup ) ให้ตั้งค่า painting เป็น false หมายเหตุ: จริงๆ แล้วไม่จำเป็นต้องเขียนวิธี drawCircle เพียงเพื่อให้ทุกคนเข้าใจว่าจะเริ่มคลิกจากจุดใด
ฟังก์ชั่น ListenToUser() { // กำหนดตัวแปรเพื่อเริ่มต้นสถานะแปรง ให้จิตรกรรม = เท็จ; // บันทึกตำแหน่งสุดท้ายของแปรง ให้lastPoint = {x: ไม่ได้กำหนด, y: ไม่ได้กำหนด}; // เมาส์กดเหตุการณ์ canvas.onmousedown = ฟังก์ชั่น (e){ ภาพวาด = จริง; ให้ x = e.clientX; ให้ y = e.clientY; DrawCircle(x,y,5); } //กิจกรรมการย้ายเมาส์ canvas.onmousemove = function(e){ if(painting){ la x = e.clientX; :x,'y':y}; DrawLine(lastPoint.x, LastPoint.y, newPoint.x, newPoint.y); LastPoint = newPoint; เหตุการณ์การปล่อยเมาส์ canvas.onmouseup = function(){ painting = false; }}// Draw point function function DrawCircle(x,y,radius){ // สร้างเส้นทางใหม่ หลังจากสร้าง คำสั่งการวาดภาพกราฟิกจะชี้ไปที่ เส้นทางสร้างเส้นทาง context.beginPath(); // วาดส่วนโค้ง (วงกลม) โดยมี (x, y) เป็นศูนย์กลางและรัศมีเป็นรัศมี // เริ่มจาก startAngle และสิ้นสุดที่ endAngle ในทิศทางที่กำหนดโดยทวนเข็มนาฬิกา (ค่าเริ่มต้นคือตามเข็มนาฬิกา ) เพื่อสร้าง context.arc(x,y,radius,0,Math.PI*2); // สร้างกราฟิกทึบโดยการเติมพื้นที่เนื้อหาของเส้นทาง context.fill(); // หลังจากปิดเส้นทางแล้ว คำสั่งรูปวาดถูกเปลี่ยนเส้นทางไปยังบริบท context.closePath();}function DrawLine(x1,y1,x2,y2){/ //ตั้งค่าความกว้างของบรรทัด context.lineWidth = 10; //ตั้งค่ารูปแบบการสิ้นสุดบรรทัด context.lineCap = round; // กำหนดรูปแบบของรอยต่อระหว่างบรรทัด context.lineJoin = round; // moveTo(x,y) ย้ายจังหวะไปยังพิกัดที่ระบุ x และ y context.moveTo(x1,y1 ); / lineTo(x, y) วาดเส้นตรงจากตำแหน่งปัจจุบันไปยังตำแหน่ง x และ y ที่ระบุ context.lineTo(x2,y2); // วาดโครงร่างกราฟิกผ่านเส้น context. stroke(); บริบท.closePath();}3. ใช้ฟังก์ชันยางลบ
แนวคิดในการนำไปปฏิบัติ:
eraserEnabled = falseclick ยางลบ คลิกยางลบ เปลี่ยนสถานะยางลบ eraserEnabled = true และสลับคลาสเพื่อให้ได้เอฟเฟกต์ ที่เปิดใช้งานeraserEnabled เป็น true ให้เลื่อนเมาส์และใช้ context.clearRect() เพื่อใช้งานยางลบ แต่ฉันพบว่าใน Canvas API วิธี clearRect สามารถล้างพิกเซลได้ แต่วิธี clearRect จะล้างพื้นที่สี่เหลี่ยม ท้ายที่สุดแล้ว ยางลบของคนส่วนใหญ่คุ้นเคยกับการเป็นทรงกลม ดังนั้นจึงมีการใช้ฟังก์ชันอันทรงพลังของพื้นที่การตัด ซึ่ง เป็นวิธีการทำคลิป รหัสต่อไปนี้ใช้ context.clearRect() เพื่อใช้งานยางลบ โปรดดูส่วนทีละขั้นตอนเพื่อเรียนรู้วิธีการนำยางสซาฟราสไปใช้ให้ดีขึ้น
ให้ Eraser = document.getElementById(eraser);let EraserEnabled = false;// อย่าลืมเรียกใช้ฟังก์ชัน ListenToUser ฟังก์ชั่น ListenToUser() { // ... หมายความว่าละเว้นโค้ดที่เขียนไว้ก่อนหน้านี้ // ... // กดเมาส์ กิจกรรมถัดไป canvas.onmousedown = function(e){ // ... if(eraserEnabled){//หากต้องการใช้ยางลบ context.clearRect(x-5,y-5,10,10) }else{ LastPoint = {'x':x,'y':y} } } // เหตุการณ์การย้ายเมาส์ canvas.onmousemove = function(e){ ให้ x = e.clientX; ให้ y = e.clientY; !painting){return} if(eraserEnabled){ context.clearRect(x-5,y-5,10,10); }else{ var newPoint = {'x':x,'y':y}; DrawLine(lastPoint.x, LastPoint.y,newPoint.x, newPoint.y); LastPoint = newPoint; } } // ...}// คลิกที่ยางลบ ยางลบ.onclick = ฟังก์ชั่น(){ ยางลบEnabled = จริง; ยางลบ.classList.add('active'); brush.classList.remove('active');}4. ใช้ฟังก์ชันการล้างหน้าจอ
แนวคิดในการนำไปปฏิบัติ:
รับโหนดองค์ประกอบ
คลิกปุ่มล้างเพื่อล้างแคนวาส
ให้ reSetCanvas = document.getElementById(clear);//ตระหนักถึงการล้างหน้าจอ reSetCanvas.onclick = function(){ ctx.clearRect(0,0,canvas.width,canvas.height); setCanvasBg('white');}// รีเซ็ตฟังก์ชันสีพื้นหลังแคนวาส setCanvasBg (สี) { ctx.fillStyle = color; ctx.fillRect (0, 0, canvas.width, canvas.height);}5. ใช้ฟังก์ชันการบันทึกเป็นรูปภาพ
แนวคิดในการนำไปปฏิบัติ:
ให้ save = document.getElementById(save); // ดาวน์โหลดภาพ save.onclick = function(){ ให้ imgUrl = canvas.toDataURL('image/png'); ให้ saveA = document.createElement('a'); body.appendChild(saveA); saveA.href = imgUrl; saveA.download = 'mypic'+(วันที่ใหม่).getTime(); saveA.target = '_blank'; saveA.คลิก();}6. ใช้ฟังก์ชันเปลี่ยนสีพื้นหลัง
แนวคิดในการนำไปปฏิบัติ:
ให้ selectBg = document.querySelector('.bg-btn');let bgGroup = document.querySelector('.color-group');let bgcolorBtn = document.querySelectorAll('.bgcolor-item');let penDetail = document. getElementById(penDetail);let activeBgColor = '#fff';//ดำเนินการเปลี่ยนสีพื้นหลังสำหรับ (let i = 0; i < bgcolorBtn.length; i++) { bgcolorBtn[i].onclick = function (e) { // หยุด bubbling e.stopPropagation(); for (let i = 0; i < bgcolorBtn.length ; i ++) { bgcolorBtn [i] .classList.remove (ใช้งานอยู่); this.classList.add (ใช้งานอยู่); this.style.พื้นหลังสี; setCanvasBg(activeBgColor); } }}document.onclick = function(){ bgGroup.classList.remove('active');}selectBg.onclick = function(e){ bgGroup.classList.add(' ใช้งานอยู่'); e.stopPropagation();}7. ใช้ฟังก์ชันการเปลี่ยนความหนาของแปรง
แนวคิดในการนำไปปฏิบัติ:
ให้ range1 = document.getElementById('range1');let lWidth = 2;let ifPop = false;range1.onchange = function(){ console.log(range1.value); console.log(typeof range1.value) ความหนา style.transform = 'scale('+ (parseInt(range1.value)) +')'; console.log(thickness.style.transform ) lWidth = parseInt(range1.value*2);}// ฟังก์ชั่นการวาดเส้น function DrawLine(x1,y1,x2,y2){ // ... context.lineWidth = lWidth; // คลิกที่แปรง . onclick = function(){ ยางลบEnabled = false; brush.classList.add('active'); ยางลบ.classList.remove('active'); if(!ifPop) กล่องป๊อปอัป console.log('pop') penDetail.classList.add('active'); }else{ penDetail.classList.remove('active'); } ifPop = !ifPop;}8. ใช้ฟังก์ชันเปลี่ยนสีแปรง
แนวคิดในการนำไปปฏิบัตินั้นคล้ายคลึงกับ การเปลี่ยนสีพื้นหลังของกระดานวาดภาพ
ให้ aColorBtn = document.getElementsByClassName(color-item);getColor();function getColor(){ for (let i = 0; i < aColorBtn.length; i++) { aColorBtn[i].onclick = function () { for ( ให้ i = 0; i < aColorBtn.length; aColorBtn[i].classList.remove(ใช้งานอยู่); this.classList.add(activeColor);9. ใช้ฟังก์ชันการเลิกทำและทำซ้ำการเปลี่ยนแปลง
แนวคิดในการนำไปปฏิบัติ:
canvasHistory ทุกครั้งที่การดำเนินการวาดภาพเสร็จสิ้น (ใช้เมธอด toDataURL() ของ Canvas เพื่อสร้างสแน็ปช็อต ซึ่งสร้างรูปภาพ base64)canvasHistory ใหม่โดยใช้เมธอด drawImage() ของ Canvas ให้เลิกทำ = document.getElementById(undo);let redo = document.getElementById(redo);// ...canvas.onmouseup = function(){ painting = false; canvasDraw();}let canvasHistory = [];let step = -1; // ฟังก์ชันวิธีการวาด canvasDraw(){ step++; เพิ่มการวาดใหม่ลงในประวัติ canvasHistory.push(canvas.toDataURL());}//Undo method function canvasUndo(){ if(step > 0){ step--; // ctx.clearRect(0,0,canvas .width,canvas.height); ให้ canvasPic = รูปภาพใหม่ (); canvasPic.src = canvasHistory [ขั้นตอน]; ctx.drawImage(canvasPic, 0, 0); } undo.classList.add('active'); }else{ undo.classList.remove('active'); การแจ้งเตือน ('ไม่สามารถเลิกทำต่อ') / ทำซ้ำฟังก์ชันเมธอด canvasRedo(){ if(step < canvasHistory.length - 1){ step++; ให้ canvasPic = new Image(); canvasPic.src = canvasHistory [ขั้นตอน]; canvasPic.onload = function () { // ctx.clearRect (0,0, canvas.width, canvas.height); ctx.drawImage (canvasPic, 0, 0); } ทำซ้ำ 'active'); }else { redo.classList.remove('active') alert('มีบันทึกล่าสุดแล้ว'); }}undo.onclick = function(){ canvasUndo();}redo.onclick = function(){ canvasRedo();}10. ใช้งานได้กับเทอร์มินัลมือถือ
แนวคิดในการนำไปปฏิบัติ:
true มีการใช้เหตุการณ์ touch false มีการใช้เหตุการณ์ mouse // ...if (document.body.ontouchstart !== undefinition) { // ใช้เหตุการณ์สัมผัส anvas.ontouchstart = function (e) { // เริ่มสัมผัส} canvas.ontouchmove = function (e) { // เริ่มเลื่อน } canvas.ontouchend = function () { // สิ้นสุดการเลื่อน }}else{ // ใช้เมาส์เหตุการณ์ // ... } // ... 4. การเหยียบย่ำหลุมพราง ปัญหาที่ 1: เมื่อคุณเปลี่ยนหน้าต่างเบราว์เซอร์บนคอมพิวเตอร์ กระดานวาดภาพจะไม่ปรับเปลี่ยนสารละลาย:
ในการประมวลผลเหตุการณ์การตอบสนอง onresize พารามิเตอร์ขนาดเพจที่ได้รับคือพารามิเตอร์ที่เปลี่ยนแปลง
เมื่อขนาดหน้าต่างเปลี่ยนแปลง ให้รีเซ็ตความกว้างและความสูงของผืนผ้าใบ หลังจากเปลี่ยนหน้าต่างแล้ว ให้กำหนด canvas.width และ canvas.height ใหม่
// อย่าลืมเรียกใช้ฟังก์ชัน autoSetSize(){ canvasSetSize(); // เมื่อเรียกใช้ฟังก์ชันนี้ ความกว้างและความสูงของผืนผ้าใบจะถูกตั้งค่าก่อนเป็นฟังก์ชัน canvasSetSize(){ la pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; canvas.width = pageWidth; canvas.height = pageHeight; หลังจากที่ขนาดหน้าต่างเปลี่ยนแปลง เหตุการณ์การปรับขนาดจะถูกทริกเกอร์เพื่อรีเซ็ตความกว้างและความสูงของหน้าต่างแคนวาส.onresize = function(){ canvasSetSize( }} คำถามที่ 2: เมื่อความกว้างของเส้นที่วาดค่อนข้างเล็กก็ใช้ได้ แต่เมื่อหนาขึ้น ปัญหาก็จะเกิดขึ้นวิธีแก้ไข: ดูเอกสารประกอบและค้นหาวิธีการ คุณเพียงแค่ต้องแก้ไข โค้ดสำหรับการวาดเส้น
// ฟังก์ชันการวาดเส้น DrawLine(x1,y1,x2,y2){ context.beginPath(); context.lineWidth = lWidth; //-----Add----- // ตั้งค่ารูปแบบการสิ้นสุดบรรทัด context.lineCap = รอบ; // กำหนดรูปแบบของทางแยกระหว่างบรรทัด context.lineJoin = รอบ; //----- join----- context.moveTo(x1,y1); y2); บริบท.จังหวะ(); บริบท.closePath();} คำถามที่ 3: ทำอย่างไรจึงจะได้สสซาฟราสยางทรงกลม?สารละลาย:
ใน canvas API วิธีการ clearRect สามารถล้างพิกเซลได้ แต่วิธีการ clearRect จะล้างพื้นที่สี่เหลี่ยม ท้ายที่สุดแล้ว ยางลบของคนส่วนใหญ่คุ้นเคยกับการเป็นทรงกลม ดังนั้นจึงมีการใช้ฟังก์ชันอันทรงพลังของพื้นที่การตัดภาพ ซึ่งก็คือวิธีการคลิป การใช้งานนั้นง่ายมาก:
ctx.save()ctx.beginPath()ctx.arc(x2,y2,a,0,2*Math.PI);ctx.clip()ctx.clearRect(0,0,canvas.width,canvas.height) ;ctx.เรียกคืน();
โค้ดด้านบนตระหนักถึงการลบพื้นที่วงกลม กล่าวคือ ขั้นแรกใช้เส้นทางวงกลม จากนั้นใช้เส้นทางนี้เป็นพื้นที่คลิป จากนั้นจึงล้างพิกเซล สิ่งหนึ่งที่ควรทราบคือคุณต้องบันทึกสภาพแวดล้อมการวาดภาพก่อน และรีเซ็ตสภาพแวดล้อมการวาดภาพหลังจากล้างพิกเซลแล้ว หากคุณไม่รีเซ็ต ภาพวาดในอนาคตจะถูกจำกัดไว้เฉพาะพื้นที่ที่ตัดนั้น
คำถามที่ 4: จะเข้ากันได้กับเทอร์มินัลมือถือได้อย่างไร?1.เพิ่มเมตาแท็ก
เนื่องจากเบราว์เซอร์จะปรับขนาดหน้าเมื่อแสดงบนโทรศัพท์มือถือ เราจึงสามารถตั้งค่าแอตทริบิวต์ meta viewport ในเมตาแท็กเพื่อบอกเบราว์เซอร์ไม่ให้ปรับขนาดหน้า = ความกว้างหน้าจอของอุปกรณ์ของผู้ใช้
<ชื่อเมตา=วิวพอร์ต content=width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0/>/*Page width=Mobile width:width=device-width ผู้ใช้ไม่สามารถปรับขนาดได้ : ผู้ใช้ปรับขนาดได้=ไม่มีมาตราส่วน: มาตราส่วนเริ่มต้น=1 มาตราส่วนสูงสุด: มาตราส่วนสูงสุด=1.0 มาตราส่วนขั้นต่ำ: มาตราส่วนขั้นต่ำ=1.0*/
2. กิจกรรมการสัมผัสเกือบทั้งหมดถูกใช้บนฝั่งมือถือ ซึ่งแตกต่างจากฝั่งพีซี
เนื่องจากฝั่งมือถือใช้เหตุการณ์การสัมผัส จึงมีการใช้แอตทริบิวต์ H5 touchstart/touchmove/touchend อย่างไรก็ตาม ฝั่งพีซีรองรับเฉพาะเหตุการณ์ของเมาส์ ดังนั้นจึงจำเป็นต้องมีการตรวจจับคุณสมบัติ
ในเหตุการณ์ touch พิกัดจะได้รับผ่าน .touches[0].clientX และ .touches[0].clientY ซึ่งควรจะแตกต่างจากเหตุการณ์ mouse
มันไม่ใช่ปัญหาใหญ่ แค่ฉันพลาดการเขียน context.beginPath(); และฉันใช้เวลาแก้ไขข้อผิดพลาดกับมัน มันเตือนฉันว่ามีโค้ดหลายสิบล้านบรรทัดและบรรทัดแรกของ ความคิดเห็นไม่ได้มาตรฐาน การเขียนโปรแกรมไม่ได้มาตรฐาน และเพื่อนร่วมงานของฉันมีสองบรรทัด ใช้งานได้ดีกว่าตามข้อกำหนดการปฏิบัติงานที่บันทึกไว้ มันมีกลิ่นหอมมาก! - -
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network