HTML canvas globalCompositeOperation 属性

HTML5 Canvas Referenzhandbuch

定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

实例

例子 1

使用不同的 globalCompositeOperation 值绘制矩形。红色矩形是目标图像。蓝色矩形是源图像：

　　　　　source-over 　　　　　　　　　　　　destination-over

Ihr Browser unterstützt das canvas-Tag nicht.

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 Zeige das Zielbild über dem Quellbild.
destination-atop Zeige das Zielbild auf dem Kopf des Quellbildes. Der Zielbildteil außerhalb des Quellbildes wird nicht angezeigt.
destination-in Zeige das Zielbild im Quellbild. Nur der Zielbildteil im Quellbild wird angezeigt, das Quellbild ist transparent.
destination-out Zeige das Zielbild außerhalb des Quellbildes. Nur der Zielbildteil außerhalb des Quellbildes wird angezeigt, das Quellbild ist transparent.
lighter Zeige das Quellbild + Zielbild.
copy Zeige das Quellbild. Ignoriere das Zielbild.
xor Verwenden Sie die XOR-Operation, um die Quell- und Zielbilder zu kombinieren.

Technische Details

Standardwert: source-over

Browserunterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Browserversion, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

HTML5 Canvas Referenzhandbuch