cancas_04 canvas合成

文章目录

• 透明度合成 globalAlpha
• 路径裁剪
• 全局合成globalCompositeOperation
• 全局合成的属性值
• 总结

透明度合成 globalAlpha

什么是globalAlpha？

• globalAlpha 就是全局对象的透明度，全局对象就是canvas 的上下文对象。
  使用方法：ctx.globalAlpha=0.6;
  
  注意：globalAlpha 要和颜色里的rgba 区别一下。rgba 控制的是某种颜色的透明度；globalAlpha 相当于是让整个画布变透明了

路径裁剪

什么是路径裁剪？

• 路径裁剪就是在画布上设置一个路径，让我们之后绘制的图像只显示在这个路径之中。
  路径裁剪的步骤：
  1. 定义路径
  2. ctx.clip()
  3. 绘制其他图形

全局合成globalCompositeOperation

什么是全局合成？

• 全局合成是canvas 画布中的已绘图像和将绘图像的融合方式。
  我们可以从形状和色彩两方面解读全局合成。
  比如下图：
  1. 先画一个黄色的正方形
  2. 设置全局合成的属性
  3. 再绘制一个绿色的圆
     
     更多

全局合成的属性值

先画一个黄色的正方形，再绘制一个绿色的圆。（全局合成默认为source-over）

先画一个黄色的正方形，设置全局合成为destination-over，再绘制一个绿色的圆

总结

已绘制到canvas 上的图像不可被修改，只能被覆盖或擦除。
路局裁剪是基于路径的一种合成方式，它只能使用路径设置裁剪区域，如果是文字的话，就无效。
透明度合成和全局合成都是基于像素的操作。