HTML canvas globalCompositeOperation คุณสมบัติ
คำนิยามและวิธีใช้
globalCompositeOperation คุณสมบัติที่ตั้งค่าหรือกลับรายละเอียดว่าทางไหนที่จะวาดภาพต้นทาง (ใหม่) บนภาพประกอบ (มีอยู่แล้ว)
ภาพต้นทาง = ภาพที่คุณวางที่จะวาดบนกระดานวาด
ภาพประกอบเป้าหมาย = ภาพที่คุณได้วาดบนกระดานวาด
ตัวอย่าง
ตัวอย่าง 1
วาดกราฟิกด้วยค่า globalCompositeOperation ต่าง ๆ ในแบบตาราง กราฟิกแดงคือภาพประกอบเป้าหมาย กราฟิกสีฟ้าคือภาพต้นทาง
source-over destination-over
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 | แสดงภาพเป้าหมายนอกภาพแหล่ง มีเพียงส่วนที่ภาพเป้าหมายนอกภาพแหล่งที่จะแสดง ภาพแหล่งเป็นแบบสีสด |
| lighter | แสดงภาพแหล่ง + ภาพเป้าหมาย |
| copy | แสดงภาพแหล่ง ละเลยภาพเป้าหมาย |
| 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>
