HTML 5 canvas globalCompositeOperation 属性
实例
globalCompositeOperation
source-over destination-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);
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 globalCompositeOperation 属性。
注释：Internet Explorer 8 <canvas> 元素。
globalCompositeOperation 像上。
源图像 = 绘图。
目标图像 = 绘图。
| 默认值： | source-over |
|---|---|
| JavaScript 语法： | context.globalCompositeOperation="source-in"; |
属性值
| 值 | 描述 |
|---|---|
| source-over | |
| source-atop | 见的。 |
| source-in | 明的。 |
| source-out | 明的。 |
| destination-over | 图像。 |
| destination-atop | 。 |
| destination-in | 明的。 |
| destination-out | 明的。 |
| lighter | + |
| copy | 图像。 |
| source-over |