Canvas 合成 globalCompositeOperation - Canvas 基础教程

前面所有章节，我们要么只绘制一个图形，或者将一个图形画在另一个之上，对于其它更多的情况，仅仅这样是远远不够的

比如要实现 Photoshop 中 合并图像 的操作，那么之前所学是万万不够的

因此 Canvas 提供了属性 globalCompositeOperation 用来设置图片混排模式

图片混排模式

混排模式可以简单的理解为两个图层按照不同模式，可以组合成不同的结果显示出来

混排模式会用到两个图层：先绘制的图是目标图(DST) ，后绘制的图是源图(SRC)

Canvas 提供了 26 种图片混排模式

source-over
source-in
source-out
source-atop
destination-over
destination-in
destination-out
destination-atop
lighter
copy
xor
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Canvas globalCompositeOperation 属性

ctx.globalCompositeOperation 属性用于设定绘制新图形时采用的图形混排模式，它的值必须是上面 26 种之一

语法

ctx.globalCompositeOperation = type;

范例

我们使用 xor 图形混排模式，减去两个图形之间的重叠部分

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
</script>

运行结果如下