canvas-16 合成

1.透明度合成 globalAlpha，[0,1]

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

使用方法：ctx.globalAlpha=0.6;

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

代码截图 效果图

2.路径裁剪 clip()

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

路径裁剪的步骤：

1.定义路径

2.ctx.clip()

3.绘制其他图形

代码截图 效果图

3.全局合成 globalCompositeOperation

全局合成是canvas 画布中的已绘图像和将绘图像的融合方式。我们可以从形状和色彩两方面解读全局合成。

比如下图：

先画一个黄色的正方形；

设置全局合成的属性；

再绘制一个绿色的圆。

全局合成 ctx.globalCompositeOperation="source-atop"   source-atop ctx.globalCompositeOperation="source-out";

该方法可以用于实现刮刮乐效果。