Web前端高级工程师课程：图像合成与路径裁剪技术详解.pptxVIP

canvas合成李伟

课堂目标理解合成的原理可以灵活熟练的合成图像

知识点综述透明度合成globalAlpha路径裁剪clip()全局合成globalCompositeOperation

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

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

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

全局合成的属性值先画一个黄色的正方形，再绘制一个绿色的圆。（全局合成默认为source-over）=+先画一个黄色的正方形，设置全局合成为destination-over，再绘制一个绿色的圆=+

刮刮乐要点：globalCompositeOperation=destination-out’

刮刮乐绘制流程1，底图：在cb中2，遮罩图：在c