Canvas之globalAlpha和globalCompositeOperation

Canvas之globalAlpha和globalCompositeOperation

globalAlpha

globalAlpha是使全局具有透明度
globalAlpha = 1 (default)

globalCompositeOperation

globalCompositeOperation是渲染绘制的图像在重叠时的效果
globalCompositeOperation = “source-over” (default)
globalCompositeOperation有11个值，分别是：

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：异或操作，即重叠部分被挖空

每个值所绘制的具体效果通过点击以下页面进行查看：
https://echo-lu.github.io/canvasdemo/demo14.html