HTML5 Canvas：合成模式

来源：自学PHP网 时间：2018-02-08 09:56 阅读数： 作者：

[导读] 在我们前面所有HTML5 canvas的例子中，图形的绘制都是一个图形位于另一个图形之上的。我们可以设置绘制的图形与已经绘制在canvas上的图形的合成模式。...

在我们前面所有 的例子中，图形的绘制都是一个图形位于另一个图形之上的。我们可以通过设置globalCompositeOperation属性来修改这个默认的行为。换句话来说，我们可以设置绘制的图形与已经绘制在canvas上的图形的合成模式。

2D上下文有两个属性用于控制canvas的图形合成模式：

globalAlpha

globalCompositeOperation

globalAlpha属性决定你绘制图形的透明度。它的取值可以在0-1之间。0代表绘制的图形完全透明，1表示绘制的图形完全不透明。0.5则表示绘制的图形处于半透明状态。默认的取值为1。

设置globalAlpha属性的js代码如下：

context.globalAlpha = 0.5;

globalCompositeOperation属性决定绘制的图形如何与canvas上已经存在的图形进行混合。

globalCompositeOperation的语法如下：

globalCompositeOperation = type

globalCompositeOperation的值引用一个“源”和一个“目标”，并且指定源和目标如何进行合成。“源”就是你要绘制的图形，“目标”是已经绘制在canvas上的元素。下面列出了globalCompositeOperation属性的可选值和它们的描述。

source-over：这是默认的取值，表示绘制的图形位于canvas中已经存在的图形之上。

source-in：新的图形和目标canvas中的图形重叠且都不透明的部分才被绘制。其它部分使用不同透明度来显示。

下面是一个HTML5 Canvas合成模式的例子。你可以通过点击相应的按钮来查看canvas中两个图层相应的合成模式。你还可以通过拖动滑块来调节canvas的透明度模式。

你的浏览器不支持HTML5 Canvas！

globalAlpha

上一篇：HTML5 Canvas：图形转换
下一篇：HTML5 Canvas：绘制图片

更多文章推荐