Canvas之globalAlpha和globalCompositeOperation
globalAlpha
globalAlpha是使全局具有透明度
globalAlpha = 1 (default)
globalCompositeOperation
globalCompositeOperation是渲染绘制的图像在重叠时的效果
globalCompositeOperation = “source-over” (default)
globalCompositeOperation有11个值,分别是:
- source-over:后绘制的图形和前绘制的图形如果发生遮挡的话,后绘制的图形会压盖在前绘制的图形上
- source-atop:后绘制的图形和前绘制的图形如果发生遮挡的话,后绘制的图形会压盖在前绘制的图形上,但超过前绘制的图形的部分会被切掉
- source-in:后绘制的图形和前绘制的图形如果发生遮挡的话,只显示后绘制的图形和前绘制的图形重合的后绘制的图形部分
- source-out:后绘制的图形和前绘制的图形如果发生遮挡的话,不显示后绘制的图形和前绘制的图形重合的部分,只显示后绘制图形与前绘制的图形不重叠的后绘制图形部分
- destination-over:后绘制的图形和前绘制的图形如果发生遮挡的话,前绘制的图形会压盖在后绘制的图形上
- destination-atop:后绘制的图形和前绘制的图形如果发生遮挡的话,前绘制的图形会压盖在后绘制的图形上,但超过后绘制的图形的部分会被切掉
- destination-in:后绘制的图形和前绘制的图形如果发生遮挡的话,只显示后绘制的图形和前绘制的图形重合的前绘制的图形部分
- destination-out:后绘制的图形和前绘制的图形如果发生遮挡的话,不显示后绘制的图形和前绘制的图形重合的部分,只显示后绘制图形与前绘制的图形不重叠的前绘制的图形部分
- lighter:重叠部分的颜色会被重新计算
- copy:只复制后一个图形
- xor:异或操作,即重叠部分被挖空
每个值所绘制的具体效果通过点击以下页面进行查看:
https://echo-lu.github.io/canvasdemo/demo14.html