17站长网 网站首页 编程教程 Html5教程 查看内容

HTML5 Canvas 合成

在html5画布上绘制形状时,可以设置如何将绘制的内容与画布上已绘制的内容进行合成。本文介绍如何将绘画内容与画布上已有的内容混合在一起.

画布合成

2D上下文具有两个属性,这些属性控制画布的合成模式。这些是:

globalAlpha
globalCompositeOperation

globalAlpha

该globalAlpha属性确定绘制内容的透明度/不透明度。它可以取0到1之间的值。0表示您绘制的内容是完全透明的。值为0.5表示绘制的内容是半透明的。值为1表示您绘制的内容是完全不透明的。预设值为1。
该globalAlpha属性设置如下:

context.globalAlpha = 0.5;

globalCompositeOperation

该globalCompositeOperation属性确定您绘制的内容如何混合到画布上的现有图形中。
该globalCompositeOperation属性设置如下:

context.globalCompositeOperation = "copy";

globalCompositeOperation引用“源”和“目的地”,并指定如何混合源和目的地。源是您绘制的内容,目的地是已经绘制的内容。以下是可能值及其含义的列表:



描述
copy源和目标重叠的地方,显示源。
destination-atop源和目标重叠,并且两者都不透明时,将显示目标。如果目标是透明的,则显示源。
destination-in在源和目标重叠且两者都不透明的地方,将显示目标。没有重叠的地方不会显示源。
destination-out在源和目标不重叠的任何地方显示目标。在其他任何地方都显示透明性。
destination-over源和目标重叠的地方显示目标。如果没有重叠,则显示源。
source-atop源和目标重叠的地方,显示源。没有重叠的地方,或者源是透明的,将显示目标。
source-in当源和目标重叠且两者都不透明时,将显示源。其他任何地方都会显示透明性。
source-out源和目标不重叠的地方,将显示源。在其他任何地方都显示透明性。
source-over当源不透明时,将显示源。目的地显示在其他任何地方。
lighter源颜色和目标颜色相互叠加,从而使颜色更亮,朝着1的颜色值(该颜色的最大亮度)移动。
xor


返回顶部