动画效果之 Canvas学习-globalCompositeOperation详解
本节介绍一下globalCompositeOperation,以的形式说明每个属性。
globalCompositeOperation与cilp()的区别:
globalCompositeOperation用于控制源图像在目标图像上的显示方式。
- 源图像: 指你准备绘制到画布上的图像
- 目标图像:在画布上已经绘制的图像
clip() 方法从原始画布中剪切任意形状和尺寸。
- 提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,并在以后的任意时间对其进行恢复(通过 restore() 方法)。
图像合成globalCompositeOperation类型
在Canvas中globalCompositeOperation属性的值总共有26种类型,每种类型都将前生不一样的效果,当然你可能看到效果都将不样,甚至有一些效果在浏览器中并不能正常的渲染。不过不要紧,我们简单的了解这26种类型其代表的含意以及产生的效果。
今天我们就来了解Canvas中的图像合成怎么使用。
值 | 描述 | 值 | 描述 |
---|---|---|---|
source-over 预设值。将新图形放在旧图形之上。 | ![]() | destination-over 将新图形放在旧图形之下。 | ![]() |
source-in 只保留新、旧图片重叠的新圆形区域,其余透明。 | ![]() | destination-in 只保留新、旧图片重叠的新圆形区域,其余透明。 | ![]() |
source-out 只保留新、旧图像的非重叠的新圆形区域,其余为透明。 | ![]() | destination-out 只保留新、旧图像的非重叠的旧圆形区域,其余为透明。 | ![]() |
source-atop 新圆形只在绘制新、旧图像重叠的新圆形区域,然后盖在旧图形之上 | ![]() | destination-atop 旧图形只保留在新、旧图形重叠的旧圆形区域,然后盖在新圆形之上。 | ![]() |
lighter 新旧图像重叠区域的颜色,有新、旧图像的颜色吗相加而得 | ![]() | xor 新旧图像重叠区域设为透明 | ![]() |
copy 移除其他图像,只保留新图形 | ![]() |











【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)