是
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









