HTML canvas globalCompositeOperation katangian

คู่มืออ้างอิง HTML5 Canvas

Paglilinaw at paggamit

globalCompositeOperation Ang mga setting ng katangian o pagbubalik ay kung paano ipapakita ang isang pinagmulang (bagong) imahe sa ibabaw ng target (nakaraang) imahe.

Pinagmulang imahe = Ang iyong iilagay sa lupon.

Target na imahe = Ang iyong inilagay na pinta sa lupon.

Eksemplo

Halimbawa 1

Magpakita ng rectangle gamit ang iba't ibang halaga ng globalCompositeOperation. Ang pula na rectangle ay ang target na imahe. Ang asul na rectangle ay ang pinagmulang imahe:

　　　　　source-over 　　　　　　　　　　　　destination-over

Hindi suporta ng iyong browser ang tag na 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);

Subukan nang personal na.

Halimbawa 2

Lahat ng halagang katangian ng globalCompositeOperation:

Subukan nang personal na.

Gramata

context.globalCompositeOperation="source-in";

Halagang katangian

Halaga Paglalarawan
source-over Default. Ipapakita ang pinagmulang imahe sa ibabaw ng target na imahe.
source-atop Sa itaas ng target na imahe, ipapakita ang pinagmulang imahe. Ang bahagi ng pinagmulang imahe na nasa labas ng target na imahe ay hindi makikita.
source-in Sa loob ng target na imahe, ipapakita ang pinagmulang imahe. Ipapakita lamang ang bahagi ng pinagmulang imahe na nasa loob ng target na imahe, ang target na imahe ay matatanggap na.
source-out Sa labas ng target na imahe, ipapakita ang pinagmulang imahe. Ipapakita lamang ang bahagi ng pinagmulang imahe na nasa labas ng target na imahe, ang target na imahe ay matatanggap na.
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> อิเล็กทรอนิกส์

คู่มืออ้างอิง HTML5 Canvas