Canvas 合成 globalCompositeOperation

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

比如要实现 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>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.