Canvas之globalAlpha和globalCompositeOperation

---

前言

这里为Canvas画布的补充,是关于画布元素透明度的两个属性的用法和区别

---

一、区别

1. golbalAlpha 是使全局具有透明度
2. globalCompositeOperation 是渲染绘制的图像在重叠时的效果

globalAlpha = 1;
globalCompositeOperation = "source-over";

二、使用方法

1.globalAlpha

同透明度一样 值为0~1之间

2.globalCompositeOperation

这个值比较多,共有是一个

1. source-over: 后绘制的图形和前绘制的图形如果发生遮挡的话,后绘制的图形会该压在前绘制的图形上
2. source-atop: 后绘制的图形和前绘制的图形如果发生遮挡的话,后绘制的图形会压盖在前绘制的图形上,但**超过前绘制的图形的部分会被切掉
3. source-in: 后绘制的图形和前绘制的图形如果发生遮挡的话, 只显示后绘制的图形和前绘制图形重合的后绘制的图形部分
4. source-out: 后绘制的图形和前绘制的图形如果发生遮挡的话,不显示后绘制的图形和前绘制的图形的重合的部分,只显示不重合的部分
5. destination-over: 后绘制的图形和前绘制的图形发生遮挡的话,前绘制的图形会压盖在后绘制的图形上
6. destination-atop: 后绘制的图形和前绘制的图形发生遮挡的话,前绘制的图形会压盖在后绘制的图形上, 但超过后绘制的图形部分会被切掉
7. destination-in: 后绘制的图形和前绘制的图形发生遮挡的话,前只显示后绘制的图形和前绘制的图形的前绘制的图形部分
8. destination-out: 后绘制的图形和前绘制的图形如果发生遮挡的话,不显示后绘制的图形和前绘制的图形的重合的部分, 只显示后绘制图形与前绘制图形不重叠的前绘制的图形部分
9. lighter: 重叠部分的颜色会被重新计算
10. copy; 值复制后一个图形 即只显示后绘制的图形
11. xor: 异或操作,即重叠部分被挖空