Canvas globalCompositeOperation attribute

Canvas 参考手册

Paglilinang at paggamit

globalCompositeOperation Ang mga setting ng attribute o pagbabalik ay kung paano mapapahintulutok ang isang source (bagong) image sa target (nakaraang) image.

Source image = Ang pinaghahahatid ninyo na drawing sa canvas.

Target image = Ang ginawa ninyo na drawing na inilagay sa canvas.

Mga halimbawa

Halimbawa 1

Ginagamit ang iba't ibang halaga ng globalCompositeOperation para magpahintulutok ng parihaba. Ang kulay pula ng parihaba ay ang target image. Ang kulay asul ng parihaba ay ang source image:

　　　　　source-over 　　　　　　　　　　　　destination-over

Ang iyong browser ay hindi sumusuporta sa 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

Halimbawa 2

Lahat ng halagang Atributo ng globalCompositeOperation:

Subukan nang personal

Gramata

context.globalCompositeOperation="source-in";

Halagang Atributo

Halaga Paglalarawan
source-over Default. Ipakita ang orihinal na imahe sa ibabaw ng target na imahe.
source-atop Ipakita ang orihinal na imahe sa itaas ng target na imahe. Ang bahagi ng orihinal na imahe sa labas ng target na imahe ay hindi makikita.
source-in Ipakita ang orihinal na imahe sa loob ng target na imahe. Ang bahagi ng orihinal na imahe sa loob ng target na imahe ang makikita lamang, ang target na imahe ay mapuputi.
source-out Ipakita ang orihinal na imahe sa labas ng target na imahe. Ang bahagi ng orihinal na imahe sa labas ng target na imahe ang makikita lamang, ang target na imahe ay mapuputi.
destination-over Ipakita ang target na imahe sa itaas ng orihinal na imahe.
destination-atop Ipakita ang target na imahe sa itaas ng orihinal na imahe. Ang bahagi ng target na imahe sa labas ng orihinal na imahe ay hindi ipakikita.
destination-in Ipakita ang target na imahe sa loob ng orihinal na imahe. Ang bahagi ng target na imahe sa loob ng orihinal na imahe ang makikita lamang, ang orihinal na imahe ay mapuputi.
destination-out Ipakita ang target na imahe sa labas ng orihinal na imahe. Ang bahagi ng target na imahe sa labas ng orihinal na imahe ang makikita lamang, ang orihinal na imahe ay mapuputi.
masmainit Ipakita ang orihinal na imahe + target na imahe.
kopiyahin Ipakita ang orihinal na imahe. Igdi ang target na imahe.
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 参考手册