CANVAS画布图形合成模式演示

马黑黑 · 发表于 2024-3-29 08:12

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

—— globalCompositeOperation

弄清 source-* 和 destination-* ：前八个合成属性为图形层级关系。source 指源，新绘制的图形；destination 指目标，已绘制好的图形。上面演示，图形分两部分：一，矩形图片是目标，是事先绘制好的图形；二，三个红蓝绿圆球，三个圆同在一张图片，这是源，是后面绘制上去的新图形。为方便理解，以下的描述将先绘制的目标图像说成现有图形，后绘制的源图像说成新图形或新绘制图形。

简单理解就是：上面的演示，矩形部分是先绘制好的图像，是目标即现有图形；红蓝绿圆球是一个整体，是源，后面追加绘制上去的新图形。

合成属性含义：

一、层级关系属性

1. source-over : 默认，在现有图形上绘制新图形；

2. source-in : 在现有图形上绘制新图形，现有图形变成透明；

3. source-out : 在现有图形之外绘制新图形，现有图形透明、现有图形之内的新绘图图形透明；

4. source-atop ：在现有图形顶部绘制新图形，现有图形之外的新图形不显示；

5. destination-over : 现有图形处在新绘制图形的上层，绘制于现有图形内的新图形被覆盖；

6. destination-in : 在新绘制图形内显示现有图形，只有两个图形交合的部分渲染出来，其余区域透明；

7. destination-out : 和 destination-in 相反，在新绘制图形外显示现有图形，新绘制图形全部透明；

8. destination-atop : 现有图形处在新绘制图形顶层，但现有图形仅保留和新绘制图形重叠部分；

二、融合关系属性

9. lighter : 两个重叠图形的颜色通过颜色值相加来确定；

10. copy : copy为复制之意，只显示新图形，也就是拷贝新图形覆盖了现有图形；

11. xor : 形状在重叠处变为透明，并在其他地方正常绘制；

12. multiply : 将顶层像素与底层相应像素相乘，结果是一幅更黑暗的图片；

13. screen : 像素被倒转、相乘、再倒转，结果是一幅更明亮的图片（与 multiply 相反）；

14. overlay : multiply 和 screen 的结合。原本暗的地方更暗，原本亮的地方更亮；

15. darken : 保留两个图层中最暗的像素；

16. lighten : 保留两个图层中最亮的像素；

17. color-dodge : 将底层除以顶层的反置；

18. color-burn : 将反置的底层除以顶层，然后将结果反过来；

19. hard-light : 类似于 overlay，multiply 和 screen 的结合，但上下图层互换了；

20. soft-light : 柔和版本的 hard-light。纯黑或纯白不会导致纯黑或纯白；

21. difference : 从顶层减去底层（或反之亦然），始终得到正值；

22. exclusion : 与 difference 类似，但对比度较低；

23. hue : 保留底层的亮度（luma）和色度（chroma），同时采用顶层的色调（hue）；

24. saturation : 保留底层的亮度和色调，同时采用顶层的色度；

25. color : 保留了底层的亮度，同时采用了顶层的色调和色度；

26. luminosity : 保持底层的色调和色度，同时采用顶层的亮度。

马黑黑 · 发表于 2024-3-29 08:14

占位

马黑黑 · 发表于 2024-3-29 08:14

占位

庶民 · 发表于 2024-3-29 09:01

我看不明白的。支持。

亦是金 · 发表于 2024-3-29 09:09

我也看不明白，但是可以尝试着套用。谢谢老师教程！

马黑黑 · 发表于 2024-3-29 14:06

亦是金发表于 2024-3-29 09:09
我也看不明白，但是可以尝试着套用。谢谢老师教程！

马黑黑 · 发表于 2024-3-29 14:07

庶民发表于 2024-3-29 09:01
我看不明白的。支持。

没关系。画布是一个相当复杂的知识体系。

南无月 · 发表于 2024-3-29 17:59

本帖最后由南无月于 2024-3-29 18:01 编辑

mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原

我记的相关滤镜笔记抄过来一份。。这个跟老师第二部分融合密切相关