บทความนี้เหมาะสำหรับผู้อ่านที่สนใจการวาดภาพบนผืนผ้าใบ กราฟิก และการแสดงภาพส่วนหน้า
ลิ่มทุกสิ่งทุกอย่างย่อมมีเหตุ
ล่าสุดผลิตภัณฑ์จำเป็นต้องมีฟังก์ชันดังกล่าว: การย้อมสีกราฟิกบางส่วน ลองคิดดูสิ นี่ไม่ใช่สิ่งที่ได้มาง่าย ๆ ฉันได้ศึกษาเทคโนโลยีการย้อมสีกราฟิกแล้ว ดังนั้นฉันจึงส่งอัลกอริธึมทั้งสองที่ฉันเขียนก่อนหน้านี้ไปให้เพื่อนของฉัน และขอให้เขานำไปใช้เป็นข้อมูลอ้างอิง อัลกอริธึมแรกคือการจัดการพิกเซล และอัลกอริธึมที่สองใช้การสังเคราะห์ภาพ: globalCompositeOperation
ทุกสิ่งล้วนมีเรื่องเซอร์ไพรส์ โดยเฉพาะเมื่อเขียนโปรแกรม
หลังจากนั้นไม่นาน เพื่อนของฉันบอกว่าอัลกอริธึมที่สองไม่ทำงานบน Firefox
สำรวจว่าทำไมฉันตกใจมากเมื่อได้ยินว่ามีแมลง ฉันได้ทดสอบแล้ว และฉันได้ทดสอบภายใต้ FireFox ด้วย ดังนั้นฉันจึงเปิด Firefox และเริ่มตัวอย่าง และพบว่าใช้งานได้ดีและไม่มีปัญหาใดๆ
แต่มีปัญหาในการรวมพันธมิตรรายย่อยเข้ากับผลิตภัณฑ์ ความแตกต่างคืออะไร? หลังจากตรวจสอบร่วมกัน ในที่สุดฉันก็ค้นพบว่าความแตกต่างอย่างหนึ่งระหว่างโค้ดตัวอย่างของฉันกับโค้ดในผลิตภัณฑ์ก็คือ โค้ดตัวอย่างใช้รูปภาพ png ในขณะที่ผลิตภัณฑ์ใช้รูปภาพ svg
อาจเป็นปัญหากับรูปภาพ svg หรือไม่ การถ่ายภาพ svg แล้วใส่ลงในโค้ดตัวอย่างนั้นผิดแน่นอน ข้อสรุปชัดเจนอยู่แล้ว:
ภายใต้เบราว์เซอร์ FireFox เมื่อวาดภาพ SVG ภายใต้ Canvas การตั้งค่าของ globalCompositeOperation จะไม่มีผล
ต่อไปนี้เป็นโค้ดสำหรับการทดสอบ ctx.globalCompositeOperation = 'destination-out' หมายถึงการใช้รูปร่างของรูปภาพต้นฉบับเพื่อเจาะรูปภาพปลายทาง
ในเบราว์เซอร์อื่นๆ รหัสต่อไปนี้ถูกต้องและกลวงออก แต่ใน
ไม่ทำงานภายใต้ FireFox:
<html><head> <script> function init() { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var img = รูปภาพใหม่(); ฟังก์ชั่น () { ctx.drawImage (img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destination-out'; } img.src = 'diffuse.png'; var svg = รูปภาพใหม่; svg.src = ./d.svg; , pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener('คลิก', ฟังก์ชั่น (e) { DrawPoint(e.clientX, e.clientY); }, false); หัว <ร่างกาย onload=init(); style=พื้นหลัง: สีแดง> <div> <canvas id=c width=1000 height=1000></canvas> </div></body></html> วิธีแก้ปัญหาพบสาเหตุของปัญหาและวิธีแก้ไขนั้นง่ายมาก
มักจะเป็นเช่นนั้น และบ่อยครั้งที่การค้นหาปัญหายากกว่าการแก้ปัญหา
วิธีแก้ปัญหานั้นง่ายมาก
เพิ่มการตัดสินให้กับโค้ดเพื่อพิจารณาว่าเบราว์เซอร์คือ FireFox หรือไม่
หากเป็นเช่นนั้น ให้วาดภาพ svg ลงบนผืนผ้าใบชั่วคราวก่อน
การวาดภาพครั้งต่อไปจะใช้พื้นที่ชั่วคราวเพื่อแทนที่รูปภาพ svg
ตัวอย่างเช่น โค้ดข้างต้นสามารถปรับปรุงได้ดังนี้:
ฟังก์ชั่น init() { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var img = รูปภาพใหม่(); img.onload = function () { ctx.drawImage(img , 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destination-out'; } img.src = 'diffuse.png'; var svg = รูปภาพใหม่; svg.src = ./d.svg; var tempCanvas = svg; { tempCanvas = document.createElement('canvas'); tempCanvas.width = svg.width; tempCanvas.height = svg.height; var tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(svg,0,0,svg.width,svg.height); pointY) { ctx.drawImage (tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener ('คลิก', ฟังก์ชั่น (e) { DrawPoint (e.clientX, e.clientY ); }, เท็จ); }ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network