在html5画布上绘制形状时,可以设置如何将绘制的 内容 与画布上已绘制的 内容 进行合成。本文介绍如何将绘画 内容 与画布上已有的 内容 混合在一起.
画布合成
2D上下文具有两个 属性 ,这些 属性 控制画布的合成模式。这些是:
globalAlpha
globalCompositeOperationglobalAlpha
该globalAlpha 属性 确定绘制 内容 的透明度/不透明度。它可以取0到1之 间的 值。0表示您绘制的 内容 是完全透明的。值为0.5表示绘制的 内容 是半透明的。值为1表示您绘制的 内容 是完全不透明的。预设值为1。
该globalAlpha 属性 设置如下:context.globalAlpha?=?0.5;globalCompositeOperation
该globalCompositeOperation 属性 确定您绘制的 内容 如何混合到画布上的现有图形中。
该globalCompositeOperation 属性 设置如下:context.globalCompositeOperation?=?" cop y";globalCompositeOperation引用“源”和“目的地”,并指定如何混合源和目的地。源是您绘制的 内容 ,目的地是已经绘制的 内容 。以下是可能值及其含义的列表:
值 描述 cop y 源和目标重叠的地方, 显示 源。 destination-atop 源和目标重叠,并且两者都不透明时,将 显示 目标。如果目标是透明的,则 显示 源。 destination-in 在源和目标重叠且两者都不透明的地方,将 显示 目标。没有重叠的地方不会 显示 源。 destination-out 在源和目标不重叠的任何地方 显示 目标。在其他任何地方都 显示 透明性。 destination-over 源和目标重叠的地方 显示 目标。如果没有重叠,则 显示 源。 source-atop 源和目标重叠的地方, 显示 源。没有重叠的地方,或者源是透明的,将 显示 目标。 source-in 当源和目标重叠且两者都不透明时,将 显示 源。其他任何地方都会 显示 透明性。 source-out 源和目标不重叠的地方,将 显示 源。在其他任何地方都 显示 透明性。 source-over 当源不透明时,将 显示 源。目的地 显示 在其他任何地方。 lighter 源颜色和目标颜色相互叠加,从而使颜色更亮,朝着1的颜色值(该颜色的最大亮度)移动。 xor
HTML5 Canvas 状态 ? ?HTML5 Canvas 绘制图像
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did92385