ตัวอย่าง
วาดรูปสี่เหลี่ยมโดยใช้สองค่า globalCompositeOperation ที่แตกต่างกันสี่เหลี่ยมสีแดงมีภาพปลายทางสี่เหลี่ยมสีฟ้าเป็นภาพที่มา:
แหล่งที่มามากกว่า
ปลายทางมากกว่า
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);
ลองตัวเอง» สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari สนับสนุนคุณสมบัติ globalCompositeOperation
หมายเหตุ: Internet Explorer 8 และรุ่นก่อนหน้านี้ไม่สนับสนุน <canvas> องค์ประกอบ
ความหมายและการใช้งาน
ชุดคุณสมบัติ globalCompositeOperation หรือผลตอบแทนที่ว่าแหล่งที่มา (ใหม่) ภาพจะมีการวาดลงบนปลายทาง (ที่มีอยู่) ภาพ
class = "notranslate" ที่มาของภาพวาด = คุณกำลังจะวางลงบนผืนผ้าใบ
destination image = ภาพวาดที่จะถูกวางไว้แล้วลงบนผืนผ้าใบ
| ค่าเริ่มต้น: | แหล่งที่มามากกว่า |
|---|---|
| ไวยากรณ์ javascript: | context.globalCompositeOperation="source-in"; |
ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| source-over | ค่าเริ่มต้น. แสดงภาพที่มามากกว่าภาพปลายทาง | เล่น " |
| source-atop | แสดงภาพที่มาด้านบนของภาพปลายทางส่วนของภาพแหล่งที่อยู่นอกภาพปลายทางจะไม่แสดง | เล่น " |
| source-in | แสดงภาพแหล่งที่มาในกับภาพปลายทางเป็นเพียงส่วนหนึ่งของภาพแหล่งที่อยู่ภายในภาพปลายทางที่มีการแสดงและภาพปลายทางมีความโปร่งใส | เล่น " |
| source-out | แสดงภาพที่มาจากภาพปลายทางเป็นเพียงส่วนหนึ่งของภาพแหล่งที่อยู่นอกภาพปลายทางที่มีการแสดงและภาพปลายทางมีความโปร่งใส | เล่น " |
| destination-over | แสดงภาพปลายทางมากกว่าภาพแหล่งที่มา | เล่น " |
| destination-atop | แสดงภาพปลายทางด้านบนของภาพแหล่งที่มาส่วนของภาพปลายทางที่อยู่นอกแหล่งภาพจะไม่แสดง | เล่น " |
| destination-in | แสดงภาพปลายทางในไปยังภาพที่แหล่งที่มาเป็นเพียงส่วนหนึ่งของภาพปลายทางที่อยู่ภายในภาพแหล่งที่มาแสดงและภาพที่มามีความโปร่งใส | เล่น " |
| destination-out | แสดงภาพปลายทางออกของภาพแหล่งที่มาเป็นเพียงส่วนหนึ่งของภาพปลายทางที่อยู่นอกแหล่งภาพจะแสดงและภาพที่มามีความโปร่งใส | เล่น " |
| lighter | แสดงภาพแหล่งที่มาภาพ + ปลายทาง | เล่น " |
| copy | แสดงภาพแหล่งที่มา ภาพปลายทางจะถูกละเว้น | เล่น " |
| xor | ที่มาของภาพรวมโดยใช้ แต่เพียงผู้เดียวหรือภาพปลายทาง | เล่น " |
ตัวอย่าง
ทุกค่าทรัพย์สิน globalCompositeOperation นี้:
แหล่งที่มามากกว่า:
แหล่งที่มาอยู่บน:
แหล่งที่มาอิน:
แหล่งที่มาออก:
ปลายทางมากกว่า:
ปลายทางอยู่บน:
ปลายทางอิน:
ปลายทางออก:
เบา:
สำเนา:
แฮคเกอร์: