HTML propiedad globalCompositeOperation lona
HTML Manual de Referencia de la lona
Ejemplos
GlobalCompositeOperation utilizando valores diferentes para dibujar un rectángulo. El rectángulo rojo esla imagen de destino,el rectángulo azul esla imagen de la fuente:
fuente-over
destino-over
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);
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);
Trate »
Soporte para el navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari apoyo globalCompositeOperation propiedad.
Nota: 8 y versiones anteriores de Internet Explorer no son compatibles con el elemento <canvas>.
Definición y Uso
globalCompositeOperation conjuntos de propiedades o devoluciones cómo (nuevo) una imagen de origen se prestó a la diana (existente) en la imagen.
= Fuente de la imagen que tiene la intención de colocar el lienzo de dibujo.
Target = Tienes la imagen colocada en el lienzo de dibujo.
Por defecto: | fuente-over |
---|---|
la sintaxis de JavaScript: | contexto .globalCompositeOperation = "fuente-in"; |
propiedad Valor
值 | 描述 |
---|---|
source-over | 默认。在目标图像上显示源图像 。 |
source-atop | 在目标图像顶部显示源图像 。 源图像位于目标图像之外的部分是不可见的。 |
source-in | 在目标图像中显示源图像 。只有目标图像之内的源图像部分会显示, 目标图像是透明的。 |
source-out | 在目标图像之外显示源图像 。只有目标图像之外的源图像部分会显示, 目标图像是透明的。 |
destination-over | 在源图像上显示目标图像 。 |
destination-atop | 在源图像顶部显示目标图像 。 目标图像位于源图像之外的部分是不可见的。 |
destination-in | 在源图像中显示目标图像 。只有源图像之内的目标图像部分会被显示, 源图像是透明的。 |
destination-out | 在源图像之外显示目标图像 。只有源图像之外的目标图像部分会被显示, 源图像是透明的。 |
lighter | 显示源图像 + 目标图像 。 |
copy | 显示源图像 。忽略目标图像 。 |
xor | 使用异或操作对源图像与目标图像进行组合。 |
HTML Manual de Referencia de la lona