图像合成

TIP

合成是指如何精细控制画布上对象的透明度和分层效果。在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。

控制图像合成操作

在 Canvas 中有两个属性 globalAlpha 和 globalCompositeOperation 来控制图像合成操作:

  • globalAlpha:设置图像的透明度。globalAlpha属性默认值为1,表示完全不透明,并且可以设置从0(完全透明)到1(完全不透明)。这个值必须设置在图形绘制之前

  • globalCompositeOperation:该属性的值在globalAlpha以及所有变换都生效后控制在当前Canvas位图中绘制图形

例子

ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 200);
ctx.globalCompositeOperation = "source-over"; //全局合成操作
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 200, 200);

图像合成类型

ctx.globalCompositeOperation = type

在 Canvas 中 globalCompositeOperation 属性的值总共有26种类型

常见的有以下几种

  1. source-over (default) 这是默认设置,新图像会覆盖在原有图像。
  2. source-in 仅仅会出现新图像与原来图像重叠的部分,其他区域都变成透明的。(包括其他的老图像区域也会透明)
  3. source-out 仅仅显示新图像与老图像没有重叠的部分,其余部分全部透明。(老图像也不显示)
  4. source-atop 新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。
  5. destination-over 新图像会在老图像的下面。
  6. destination-in 仅仅新老图像重叠部分的老图像被显示,其他区域全部透明。
  7. destination-out 仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。
  8. destination-atop 老图像仅仅仅仅显示重叠部分,新图像会显示在老图像的下面。
  9. lighter 新老图像都显示,但是重叠区域的颜色做加处理。
  10. darken 保留重叠部分最黑的像素。(每个颜色位进行比较,得到最小的)。
  11. lighten 保证重叠部分最量的像素。(每个颜色位进行比较,得到最大的)。
  12. xor 重叠部分会变成透明。
  13. copy 只有新图像会被保留,其余的全部被清除(边透明)。

示例一

详见CodePen: Canvas: Compositing List

示例二

详见CodePen: Canvas: Compositing

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress