hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

HTML5 Canvas 图形组合是怎样完成的?附代码【html5教程】

2019-11-26HTML搜搜PHP网54°c
A+ A-
本篇文章给人人带来的内容是关于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)。

上图是在Google Chrome浏览器41.0.2272.118版本中的结果。但是,对组合操纵的处置惩罚还异常辣手,因为五大主流浏览器,如Chrome, Firefox, Safari, Opera, 和IE9,对组合的处置惩罚不尽相同。假如你想运用图形组合,你应当相识每一个浏览器当前的支撑状况。

因为globalCompositeOperation属性是全局的,在运用时应当注重保留和恢复状况。

以上就是对HTML5 Canvas 图形组合是怎样完成的?附代码的悉数引见,假如您想相识更多有关Html5视频教程,请关注ki4网。


以上就是HTML5 Canvas 图形组合是怎样完成的?附代码的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
HTML5 Canvas 图形组合是怎样完成的?附代码【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
推荐阅读