在canvas中绘制庞杂图形时，常常会涌现图形交织的状况，canvas把图形交织的状况称作组合。
经由过程上下文对象的globalCompositeOperation属性来设置图形的组合体式格局，该属性的取值及其寄义见表 4‑5。个中，source指新绘制的图形，而destination指原有的图形，默认值是source-over。
| 操纵 | 寄义 |
|---|---|
| source-atop (S atop D) | 在两个图象都黑白通明的处所，显现源图象。在目的图象黑白通明但源图象是通明的处所，显现目的图象。其他处所通明显现。 |
| source-in (S in D) | 在源图象和目的图象均通明的处所，显现源图象。其他处所通明显现。 |
| source-out (S out D) | 在源图象非通明且目的图象为通明的处所，显现源图象。其他处所通明显现。 |
| source-over (S over D, default) | 在源图象为非通明的处所，显现源图象。其他处所显现目的图象。 |
| destination-atop (S atop D) | 在源图象和目的图象均为非通明的处所，显现目的图象。在源图象非通明且目的图象为通明的处所，显现源图象。其他处所通明显现。 |
| destination-in (S in D) | 在源图象和目的图象均为非通明的处所，显现目的图象。其他处所通明显现。 |
| destination -out (S out D) | 在目的图象为非通明且源图象为通明的处所，显现目的图象。其他处所通明显现。 |
| destination -over (S over D) | 在目的图象为非通明的处所，显现目的图象。其他处所显现目的图象。 |
| lighter (S plus D) | 显现源图象和目的图象之和。 |
| xor (S xor D) | 源图象和目的图象取异或操纵。 |
| copy (D is ignored) | 显现源图象，不显现目的图象。 |
下图展现了globalCompositeOperation属性在差别取值下，源图形与目的图形的结果。个中，赤色的圆代表源图形（S），蓝色的矩形代表目的图形（D）。
上图是在Google Chrome浏览器41.0.2272.118版本中的结果。但是，对组合操纵的处置惩罚还异常辣手，因为五大主流浏览器，如Chrome, Firefox, Safari, Opera, 和IE9，对组合的处置惩罚不尽相同。假如你想运用图形组合，你应当相识每一个浏览器当前的支撑状况。
因为globalCompositeOperation属性是全局的，在运用时应当注重保留和恢复状况。
以上就是对HTML5 Canvas 图形组合是怎样完成的？附代码的悉数引见，假如您想相识更多有关Html5视频教程，请关注ki4网。
以上就是HTML5 Canvas 图形组合是怎样完成的？附代码的细致内容，更多请关注ki4网别的相干文章！
