介绍
小编给大家分享一下HTML5中实现帆布图形组合的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
在画布中绘制复杂图形时,经常会出现图形交叉的情况,帆布把图形交叉的情况称作组合。
通过上下文对象的globalCompositeOperation属性来设置图形的组合方式,该属性的取值及其含义见表4 ?5,其中,源指新绘制的图形,而目的地指原有的图形,默认值是来源地,而。
<标题>表4 ?5 globalCompositeOperation属性取值及含义操作含义source-atop (S在D)在两个图像都是非透明的地方,显示源图像。在目标图像是非透明但源图像是透明的地方,显示目标图像。其他地方透明显示.source-in (D S)在源图像和目标图像均透明的地方,显示源图像。其他地方透明显示.source-out D (S)在源图像非透明且目标图像为透明的地方,显示源图像。其他地方透明显示.source-over (S/D,违约)在源图像为非透明的地方,显示源图像。其他地方显示目标图像.destination-atop (S在D)在源图像和目标图像均为非透明的地方,显示目标图像。在源图像非透明且目标图像为透明的地方,显示源图像。其他地方透明显示.destination-in (D S)在源图像和目标图像均为非透明的地方,显示目标图像。其他地方透明显示.destination两级D (S)在目标图像为非透明且源图像为透明的地方,显示目标图像。其他地方透明显示.destination起(S/D)在目标图像为非透明的地方,显示目标图像。其他地方显示目标图像较轻(S + D)显示源图像和目标图像之和.xor (S xor D)源图像和目标图像取异或操作.copy忽略(D)显示源图像,不显示目标图像。下图展示了globalCompositeOperation属性在不同取值下,源图形与目标图形的效果,其中,红色的圆代表源图形(S),蓝色的矩形代表目标图形(D)。
上图是在Google Chrome浏览器41.0.2272.118版本中的效果,然而,对组合操作的处理还非常棘手,因为五大主流浏览器,如Chrome, Firefox、Safari、Opera和IE9,对组合的处理不尽相同。如果你想使用图形组合,你应该了解每个浏览器当前的支持情况。
由于globalCompositeOperation属性是全局的,在使用时应该注意保存和恢复状态。
看完了这篇文章,相信你对HTML5中实现帆布图形组合的方法有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
