Canvas学习:globalCompositeOperation详解
globalCompositeOperation的作用
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。
简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的globalCompositeOperation
操作,可以得到不同的效果,比如下图:
正如上图,红苹果和黑色的圆,通过globalCompositeOperation
的destination-out
就变成了被咬了一口的红苹果。也就是说,在Canvas中通过图像的合成,我们可以实现一些与众不同的效果,比如我们要制作一个刮刮卡抽奖的效果。 今天我们就来了解Canvas中的图像合成怎么使用。
属性值介绍
图像合成globalCompositeOperation类型
在Canvas中globalCompositeOperation
属性的值总共有26种类型,每种类型都将前生不一样的效果,当然你可能看到效果都将不样,甚至有一些效果在浏览器中并不能正常的渲染。不过不要紧,我们简单的了解这26种类型其代表的含意以及产生的效果。
ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill();
上面的代码将在Canvas画布上绘制一个半径为80px
的红色圆形,在这里把它称为图像源。
ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.restore();
这段代码将在Canvas画布上绘制一个半径为80px
的橙色圆形,在这里把它称为图像目标。在图像源和目标图像之间设置globalCompositeOperation
的值,就可以完成图像的合成操作:
ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.restore();
此时得到的效果如下:
source-over
source-over
是globalCompositeOperation
属性的默认值。源图形覆盖目标图形,源图形不透明的地方显示源图形,其余显示目标图形
source-in
source-in
:目标图形和源图形重叠且都不透明的部分才被绘制
source-out
source-out
:目标图形和源图形不重叠的部分会被绘制
source-atop
source-atop
:目标图形和源图形内容重叠的部分的目标图形会被绘制
destination-over
destination-over
:目标图形和源图形内容后面的目标图形会被绘制
destination-in
destination-in
:目标图形和源图形重叠的部分会被保留(源图形),其余显示为透明
source-over | 默认。在目标图像上显示源图像。 |
source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
source-in | 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。 |
source-out | 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。 |
destination-over | 在源图像上方显示目标图像。 |
destination-atop | 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 |
destination-in | 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。 |
destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。 |
lighter | 显示源图像 + 目标图像。 |
copy | 显示源图像。忽略目标图像。 |
xor | 使用异或操作对源图像与目标图像进行组合。 |
其它的就不一一展示了。