HTML5Canvas图形组合是怎样实现的？附代码-

?本篇文章给大家带来的内容是对于，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于HTML5 Canvas 图形组合是怎样实现的？附代码，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

在canvas中绘制复杂图形时，时常会涌现图形穿插的状况，canvas把图形穿插的状况称作组合。

通过高低文对象的globalCompositeOperation属性来设定图形的组合方式，该属性的取值及其含义见表 4?5。其中，source指新绘制的图形，而destination指原有的图形，默许值是source-over。

表 4?5 globalCompositeOperation属性取值及含义

操纵	含义
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）。

以上就是HTML5 Canvas 图形组合是怎样实现的？附代码的细致内容，更多请关注 百分百源码网 其它相干文章！