canvas globalCompositeOperation
时间: 2023-11-10 09:34:27 浏览: 134
`globalCompositeOperation` 是 Canvas API 中一个非常有用的属性,它可以控制在绘制新图形时如何与已有图形混合。它可以让我们在 Canvas 中实现一些有趣的效果,比如透明效果、图形合并、遮罩等。
`globalCompositeOperation` 属性可以设置为一下几个值:
- `source-over`:默认值,新图形会覆盖在原有图形之上。
- `source-in`:新图形和原有图形重叠的部分会保留,其他部分会被清除。
- `source-out`:新图形和原有图形不重叠的部分会保留,重叠的部分会被清除。
- `source-atop`:新图形和原有图形重叠的部分会保留,原有图形不重叠的部分会被清除。
- `destination-over`:新图形会被绘制在原有图形下面。
- `destination-in`:新图形和原有图形重叠的部分会保留,其他部分会被清除(与 `source-in` 相反)。
- `destination-out`:新图形和原有图形不重叠的部分会保留,重叠的部分会被清除(与 `source-out` 相反)。
- `destination-atop`:新图形和原有图形重叠的部分会保留,新图形不重叠的部分会被清除(与 `source-atop` 相反)。
- `lighter`:新图形和原有图形重叠的部分会相加。
- `copy`:新图形会完全替换原有图形。
- `xor`:新图形和原有图形重叠的部分会抵消,其他部分会保留。
通过使用 `globalCompositeOperation` 属性,我们可以很容易地实现一些有趣的效果,比如裁剪圆形图片、实现半透明效果等。
阅读全文