Canvas globalCompositeOperation

ตามค่าเริ่มต้น หากวัตถุ (แหล่งที่มา) ถูกวาดไว้ด้านบนของวัตถุอื่น (เป้าหมาย) ใน Canvas เบราว์เซอร์จะวางซ้อนภาพของวัตถุต้นทางที่ด้านบนของภาพของวัตถุเป้าหมาย

พูดง่ายๆ ก็คือ ใน Canvas ด้วยการรวมแหล่งที่มาของรูปภาพและรูปภาพเป้าหมายผ่านการดำเนินการ globalCompositeOperation ใน Canvas คุณจะได้รับเอฟเฟกต์ที่แตกต่างกัน เช่น รูปต่อไปนี้:

ดังที่แสดงในภาพด้านบน แอปเปิ้ลสีแดงและวงกลมสีดำกลายเป็นแอปเปิ้ลสีแดงที่ถูกกัดผ่าน destination-out จาก globalCompositeOperation กล่าวอีกนัยหนึ่ง ด้วยการสังเคราะห์ภาพใน Canvas เราสามารถบรรลุเอฟเฟกต์พิเศษบางอย่างได้ เช่น เราต้องการสร้างเอฟเฟกต์ลอตเตอรีบัตรขูด วันนี้เราจะมาเรียนรู้วิธีใช้การสังเคราะห์ภาพใน Canvas

มีค่าทั้งหมด 26 ประเภทสำหรับแอตทริบิวต์ globalCompositeOperation ใน Canvas แต่ละประเภทจะสร้างเอฟเฟกต์ที่แตกต่างกัน แน่นอนว่าคุณอาจเห็นว่าเอฟเฟกต์จะแตกต่างกันและเอฟเฟกต์บางอย่างอาจไม่แสดงผลตามปกติในเบราว์เซอร์ แต่ไม่เป็นไร เรามาทำความเข้าใจความหมายและผลกระทบของทั้ง 26 ประเภทนี้กันดีกว่า

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'สีแดง'; ctx.beginPath(-40, 20, 80, 0, Math.PI * 2 จริง); ctx.closePath();

โค้ดด้านบนจะวาดวงกลมสีแดงที่มีรัศมี 80px บนผืนผ้าใบ Canvas ซึ่งเรียกว่าแหล่งที่มาของรูปภาพที่นี่

 ctx.fillStyle = 'สีส้ม'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, จริง); ();

รหัสนี้จะวาดวงกลมสีส้มที่มีรัศมี 80px บนผืนผ้าใบ Canvas ซึ่งเรียกว่าเป้าหมายรูปภาพที่นี่ ด้วยการตั้งค่า globalCompositeOperation ระหว่างแหล่งที่มาของรูปภาพและรูปภาพเป้าหมาย การดำเนินการสังเคราะห์รูปภาพจึงจะเสร็จสมบูรณ์ได้:

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'สีแดง'; ctx.beginPath(-40, 20, 80, 0, Math.PI * 2 จริง); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'แหล่งที่มาใน'; ctx.fillStyle = 'สีส้ม'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, จริง); (); ctx.เรียกคืน();

ผลกระทบที่ได้รับในเวลานี้มีดังนี้:

source-over เป็นค่าเริ่มต้นของคุณสมบัติ globalCompositeOperation กราฟิกต้นฉบับครอบคลุมกราฟิกเป้าหมาย กราฟิกต้นฉบับจะแสดงในส่วนทึบของกราฟิกต้นฉบับ และกราฟิกเป้าหมายจะแสดงในส่วนที่เหลือ

source-in : เฉพาะส่วนของกราฟิกเป้าหมายและกราฟิกต้นฉบับที่ทับซ้อนกันและทึบแสงเท่านั้นที่จะถูกวาด

source-out : ส่วนที่ไม่ทับซ้อนกันของกราฟิกเป้าหมายและกราฟิกต้นฉบับจะถูกวาดขึ้นมา

source-atop : กราฟิกเป้าหมายในส่วนที่ทับซ้อนกันของเนื้อหาของกราฟิกเป้าหมายและกราฟิกต้นฉบับจะถูกวาดขึ้นมา

destination-over : กราฟิกปลายทางที่อยู่ด้านหลังกราฟิกปลายทางและเนื้อหากราฟิกต้นฉบับจะถูกวาดขึ้นมา

destination-in : ส่วนที่ทับซ้อนกันของกราฟิกปลายทางและกราฟิกต้นฉบับจะยังคงอยู่ (กราฟิกต้นฉบับ) และส่วนที่เหลือจะแสดงอย่างโปร่งใส

ส่วนอื่นๆ จะไม่แสดงทีละรายการ คุณสามารถดูคำอธิบายเฉพาะที่เกี่ยวข้องกับแต่ละค่าได้ที่นี่

มีคุณสมบัติสองประการ globalAlpha และ globalCompositeOperation ใน Canvas เพื่อควบคุมการดำเนินการสังเคราะห์ภาพ:

• globalAlpha : ตั้งค่าความโปร่งใสของภาพ คุณสมบัติ globalAlpha มีค่าเริ่มต้นเป็น 1 ซึ่งบ่งบอกถึงความทึบเต็มที่ และสามารถตั้งค่าได้ตั้งแต่ 0 (โปร่งใสเต็มที่) ถึง 1 (ทึบแสงเต็มที่) ต้องตั้งค่านี้ก่อนที่จะวาดกราฟ
• globalCompositeOperation : ค่าของแอตทริบิวต์นี้ควบคุมการวาดภาพกราฟิกในบิตแมป Canvas ปัจจุบันหลังจาก globalAlpha และการแปลงทั้งหมดมีผล

ในธุรกิจประจำวันของเรา เรามักจะเห็นผลจากลอตเตอรี เช่น บัตรขูด ถ้าเราใช้ Canvas ในการทำ เราจะใช้การสังเคราะห์ภาพ Canvas

 <div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>

เราแสดงรางวัล (หากเป็นรูปภาพ) เป็นพื้นหลังของ div#card จากนั้นขั้นแรกให้วาดรูปสี่เหลี่ยมผืนผ้าสีเทา (ภาพต้นฉบับ) ใน Canvas จากนั้นวาดภาพใหม่แบบไดนามิกผ่านกิจกรรมเมาส์ (หรือเหตุการณ์การสัมผัส) (ซึ่งคล้ายกับแปรง) และตั้งค่าของแอตทริบิวต์ globalCompositeOperation เป็น destination-out (ใหม่ วาด ส่วนที่ไม่ทับซ้อนกันของกราฟิกและเนื้อหากราฟิกที่มีอยู่แล้วในพื้นที่เป้าหมายจะยังคงอยู่) เมื่อการลบแปรงมากกว่าสัดส่วนที่กำหนด ให้ลบองค์ประกอบ <canvas> หรือใช้ clearRect() เพื่อล้าง Canvas Canvas เพื่อแสดงพื้นหลัง div

ในบทความนี้ เราจะแนะนำการสังเคราะห์ภาพของ Canvas เป็นหลัก ใน Canvas การดำเนินการสังเคราะห์ภาพสามารถควบคุมได้ผ่านคุณลักษณะสองประการคือ globalAlpha และ globalCompositeOperation เพื่อให้บรรลุผลการสังเคราะห์ภาพ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน และฉันก็หวังว่าทุกคนจะสนับสนุน VeVb Wulin Network