Web前端高级工程师课程：图像合成技术详解.pdfVIP

课堂目标

1.理解合成的原理

2.可以灵活熟练的合成图像

知识点综述

1.合成globalAlpha

2.路径裁剪clip()

3.全局合成globalCompositeOperation

什么是globalAlpha？

globalAlpha就是全局对象的，全局对象就是canvas的上下文对象。

使用方法：ctx.globalAlpha=0.6;

注意：globalAlpha要和颜色里的rgba区别一下。rgba控制的是某种颜色的；globalAlpha相当于是让整个画

布变透明了。

什么是路径裁剪？

路径裁剪就是在画布上设置一个路径，让我们绘制的图像只显示在这个路径之中。

路径裁剪的步骤：

1.定义路径

2.ctx.clip()

3.绘制其它图形

什么是全局合成？

全局合成是canvas画布中的已绘图像和将绘图像的融合方式。

我们可以从形状和色彩两方面解读全局合成。

比如右图：

1.先画一个的正方形

2.设置全局合成的属性

3.再绘制一个绿