Canvas globalCompositeOperation

2020-04-25 08:03:04易采站长站整理
globalCompositeOperation
属性的默认值。源图形覆盖目标图形,源图形不透明的地方显示源图形,其余显示目标图形

source-in

source-in
:目标图形和源图形重叠且都不透明的部分才被绘制

source-out

source-out
:目标图形和源图形不重叠的部分会被绘制

source-atop

source-atop
:目标图形和源图形内容重叠的部分的目标图形会被绘制

destination-over

destination-over
:目标图形和源图形内容后面的目标图形会被绘制

destination-in

destination-in
:目标图形和源图形重叠的部分会被保留(源图形),其余显示为透明

其它的就不一一展示了。具体每个值对应的描述,可以点击这里查阅 。

结合globalAlpha控制图像合成操作

在Canvas中有两个属性

globalAlpha
globalCompositeOperation
来控制图像合成操作:

globalAlpha
:设置图像的透明度。
globalAlpha
属性默认值为
1
,表示完全不透明,并且可以设置从
0
(完全透明)到
1
(完全不透明)。这个值必须设置在图形绘制之前
globalCompositeOperation
:该属性的值在
globalAlpha
以及所有变换都生效后控制在当前Canvas位图中绘制图形

合成图像的应用示例

在平时的业务中,我们常常能看到刮刮卡这样的抽奖效果。如果我们使用Canvas来做,就会用到Canvas图像的合成。


<div id="card">
<canvas id="canvasOne" width="500" height="300"></canvas> </div>

我们把奖品(如果是一个图像)当作

div#card