HTML5中实现Canvas图形组合的方法
导读:本文共1413字符,通常情况下阅读需要5分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 在canvas中绘制复杂图形时,经常会出现图形交叉的情况,canvas把图形交叉的情况称作组合。通过上下文对象的globalCompositeOperation属性来设置图形的组合方式,该属性的取值及其含义见表 4‑5。其中,source指新绘制的图形,而destination指原有的图形,默认值是source-over。表 4‑5 globalComposit... ...
目录
(为您整理了一些要点),点击可以直达。在canvas中绘制复杂图形时,经常会出现图形交叉的情况,canvas把图形交叉的情况称作组合。
通过上下文对象的globalCompositeOperation属性来设置图形的组合方式,该属性的取值及其含义见表 4‑5。其中,source指新绘制的图形,而destination指原有的图形,默认值是source-over。
下图展示了globalCompositeOperation属性在不同取值下,源图形与目标图形的效果。其中,红色的圆代表源图形(S),蓝色的矩形代表目标图形(D)。
上图是在Google Chrome浏览器41.0.2272.118版本中的效果。然而,对组合操作的处理还非常棘手,因为五大主流浏览器,如Chrome, Firefox, Safari, Opera, 和IE9,对组合的处理不尽相同。如果你想使用图形组合,你应该了解每个浏览器当前的支持情况。
由于globalCompositeOperation属性是全局的,在使用时应该注意保存和恢复状态。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
HTML5中实现Canvas图形组合的方法的详细内容,希望对您有所帮助,信息来源于网络。