Canvas ตัวแปร globalCompositeOperation

คู่มือ Canvas

การกำหนดและการใช้งาน

globalCompositeOperation การตั้งค่าหรือกลับค่าของตัวแปรเพื่อกำหนดวิธีการวาดภาพต้นแบบ (ใหม่) บนภาพเป้าหมาย (มีอยู่แล้ว)

ภาพต้นแบบ = ภาพวาดที่คุณตั้งใจที่จะวางบนกระดานวาด

ภาพเป้าหมาย = ภาพวาดที่คุณได้ทำการวางบนกระดานวาด

ตัวอย่าง

ตัวอย่าง 1

วาดสี่เหลี่ยมผืนผ้าด้วยค่า globalCompositeOperation ต่างกัน สี่เหลี่ยมผืนผ้าสีแดงคือภาพเป้าหมาย สี่เหลี่ยมผืนผ้าสีสีน้ำเงินคือภาพต้นแบบ:

　　　　　source-over 　　　　　　　　　　　　destination-over

เว็บเครื่องมือของคุณไม่สนับสนุนแท็ก canvas。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

ค่าทั้งหมดของ globalCompositeOperation:

ลองทดลองด้วยตัวเอง

วลี

context.globalCompositeOperation="source-in";

ค่าทางภาพ

ค่า รายละเอียด
source-over ค่าปริยาย
source-atop แสดงภาพต้นทางด้านบนของภาพปลายทาง。ส่วนภาพต้นทางที่อยู่นอกภาพปลายทางจะไม่แสดง。
source-in แสดงภาพต้นทางในภาพปลายทาง。เฉพาะส่วนภาพต้นทางในภาพปลายทางที่จะแสดง ภาพปลายทางเป็นสีและสัปดาห์。
source-out แสดงภาพต้นทางนอกภาพปลายทาง。เฉพาะส่วนภาพต้นทางนอกภาพปลายทางที่จะแสดง ภาพปลายทางเป็นสีและสัปดาห์。
destination-over แสดงภาพปลายทางด้านบนของภาพต้นทาง。
destination-atop แสดงภาพปลายทางด้านบนของภาพต้นทาง。ส่วนภาพปลายทางนอกภาพต้นทางจะไม่แสดง。
destination-in แสดงภาพปลายทางในภาพต้นทาง。เฉพาะส่วนภาพปลายทางในภาพต้นทางที่จะแสดง ภาพต้นทางเป็นสีและสัปดาห์。
destination-out แสดงภาพปลายทางนอกภาพต้นทาง。เฉพาะส่วนภาพปลายทางนอกภาพต้นทางที่จะแสดง ภาพต้นทางเป็นสีและสัปดาห์。
ขาวเข้ม แสดงภาพต้นทาง + ภาพปลายทาง。
คัดลอก แสดงภาพต้นทาง。ละเลยภาพปลายทาง。
xor ใช้การปฏิบัติการ XOR ในการรวมภาพต้นทางกับภาพปลายทาง

รายละเอียดเทคนิค

ค่าเริ่มต้น: source-over

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้ระบุตัวเวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ครบถ้วน

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

หมายเหตุ:Internet Explorer 8 และตัวเวอร์ชันที่เก่ากว่าไม่สนับสนุนสิ่งของ <canvas> อยู่

คู่มือ Canvas