cancas_04 canvas合成

文章目录

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

透明度合成 globalAlpha

什么是globalAlpha?

  • globalAlpha 就是全局对象的透明度,全局对象就是canvas 的上下文对象。
    使用方法:ctx.globalAlpha=0.6;
    cancas_04 canvas合成_第1张图片
    注意:globalAlpha 要和颜色里的rgba 区别一下。rgba 控制的是某种颜色的透明度;globalAlpha 相当于是让整个画布变透明了

路径裁剪

什么是路径裁剪?

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

全局合成globalCompositeOperation

什么是全局合成?

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

全局合成的属性值

先画一个黄色的正方形,再绘制一个绿色的圆。(全局合成默认为source-over)
cancas_04 canvas合成_第3张图片
先画一个黄色的正方形,设置全局合成为destination-over,再绘制一个绿色的圆cancas_04 canvas合成_第4张图片

总结

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

你可能感兴趣的:(canvas,canvas)