ตัวอย่าง
วาดรูปสี่เหลี่ยมโดยใช้สองค่า globalCompositeOperation ที่แตกต่างกัน สี่เหลี่ยมสีแดงมี destination images สี่เหลี่ยมสีฟ้าเป็น source images :
แหล่งที่มามากกว่า
ปลายทางมากกว่า
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);
ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
ชุดคุณสมบัติ globalCompositeOperation หรือผลตอบแทนที่ว่าแหล่งที่มา (new) ภาพจะมีการวาดลงบนปลายทาง (existing) ภาพ
ภาพวาด source = คุณกำลังจะวางลงบนผืนผ้าใบ
ภาพปลายทาง = ภาพวาดที่จะถูกวางไว้แล้วลงบนผืนผ้าใบ
| ค่าเริ่มต้น: | แหล่งที่มามากกว่า |
|---|---|
| ไวยากรณ์ JavaScript: | context .globalCompositeOperation="source-in"; |
ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| source-over | ค่าเริ่มต้น. แสดงภาพแหล่งที่มามากกว่าภาพปลายทาง | เล่น " |
| source-atop | แสดงภาพแหล่งที่มาด้านบนของภาพปลายทาง ส่วนของ source image ที่อยู่นอก destination image จะไม่แสดง | เล่น " |
| source-in | แสดงภาพแหล่งที่มาในกับภาพปลายทาง เป็นเพียงส่วนหนึ่งของ source image ที่อยู่ภายใน destination image จะแสดงและ destination image มีความโปร่งใส | เล่น " |
| source-out | แสดงภาพที่มาจากภาพปลายทาง เป็นเพียงส่วนหนึ่งของ source image ที่อยู่นอก destination image จะแสดงและ destination image มีความโปร่งใส | เล่น " |
| destination-over | แสดงภาพปลายทางมากกว่าภาพแหล่งที่มา | เล่น " |
| destination-atop | แสดงภาพปลายทางด้านบนของภาพแหล่งที่มา ส่วนของ destination image ที่อยู่นอก source image ไม่ได้แสดงให้เห็น | เล่น " |
| destination-in | แสดงภาพปลายทางในไปยังภาพที่แหล่งที่มา เป็นเพียงส่วนหนึ่งของ destination image ที่อยู่ภายใน source image มีการแสดงและ source image มีความโปร่งใส | เล่น " |
| destination-out | แสดงภาพปลายทางออกของภาพแหล่งที่มา เป็นเพียงส่วนหนึ่งของ destination image ที่อยู่นอก source image ก็แสดงให้เห็นและ source image มีความโปร่งใส | เล่น " |
| lighter | แสดงภาพแหล่งที่มาภาพ + ปลายทาง | เล่น " |
| copy | แสดงภาพแหล่งที่มา ภาพปลายทางจะถูกละเว้น | เล่น " |
| xor | ภาพแหล่งที่มารวมกันโดยใช้ แต่เพียงผู้เดียวหรือมีภาพปลายทาง | เล่น " |
<ผ้าใบวัตถุ