HTML5 canvas globalCompositeOperation绘图类型讲解

我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的。比如说,它这样受制于图形的绘制顺序。不过,我们可以利用 globalCompositeOperation 属性来改变这些做法。
globalCompositeOperation = type
我们不仅可以在已有图形后面再画新图形,还可以用来遮盖,清除(比 clearRect 方法强劲得多)某些区域。

type 是下面 12 种字符串值之一:

注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”。

source-over (default)

这是默认设置,新图形会覆盖在原有内容之上。

Canvas source over

destination-over

会在原有内容之下绘制新图形。

Canvas destination over

source-in

新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。

Canvas source in

destination-in

原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的。

Image:Canvas_composite_destin.png

source-out

结果是只有新图形中与原有内容不重叠的部分会被绘制出来。

Image:Canvas_composite_srcout.png

destination-out

原有内容中与新图形不重叠的部分会被保留。

Image:Canvas_composite_destout.png

source-atop

新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上。

Image:Canvas_composite_srcatop.png

destination-atop

原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形

Image:Canvas_composite_destatop.png

lighter

两图形中重叠部分作加色处理。

Image:Canvas_composite_lighten.png

darker

两图形中重叠的部分作减色处理。

Image:Canvas_composite_darken.png

xor

重叠的部分会变成透明。

Image:Canvas_composite_xor.png

copy

只有新图形会被保留,其它都被清除掉。

Image:Canvas_composite_copy.png

注意:copy 和 darker 属性值在 Gecko 1.8 型的浏览器(Firefox 1.5 betas,等等)上暂时还无效。

posted @   盼少  阅读(822)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示