Compose 和 Blend（一）

AbnerMing 发布于2019-08-30 12:59 / 1918人阅读

摘要：浏览器渲染过程在讲和之前，我想先介绍一下浏览器整个的渲染过程。这一步是渲染的最后一步，他的作用是将不同的图层合在一起。和其它步骤有所不同的是，这一步有时会有的参与，比如，等元素都是由进行操作的。

浏览器渲染过程

在讲 compose 和 blend 之前，我想先介绍一下浏览器整个的渲染过程。
浏览器在渲染页面的时候，大概会走几个步骤：layout,repaint,compose。

layout 过程中要做的事就是计算元素的位置和尺寸，所以我们在改变一个元素尺寸，或者 overflow，position 等属性的时候就会触发页面的重新布局，有人也把这叫做 reflow(回流)。所以我们在很多讲前端动画的文章中，都说要尽量避免页面回流。

repaint 这个步骤就好理解了，这一步就是给元素上色。更改元素的 color ， background-color 等属性都会导致 repaint。

compose 这一步是渲染的最后一步，他的作用是将不同的图层合在一起。和其它步骤有所不同的是，这一步有时会有 GPU 的参与，比如 canvas， video 等元素都是由 GPU 进行 compose 操作的。

Compose 合成

compose 的功能就是将两张图合成一张图，下面的图例中 destination 就是背景， source 就是前景，他们之间叠加的部分叫做 backdrop。

compose 的操作大概有下面几种

clear

前景和背景都不显示

copy

只会显示前景

destination

只会显示背景

source over

前景在背景之上，也是我们最常用的方式。

destination over

背景在前景之上

source in

只显示重叠区域中前景的部分

destination in

只显示重叠区域中背景的部分，有点类似 svg 中的 clip-path

source out

将重叠的区域从前景移除

destination out

将重叠的区域从背景移除

source atop

将重叠区域替换为前景

destination atop

将重叠区域替换为背景

XOR

去除重叠的区域

参考：

globalCompositeOperation

W3C Compositing and Blending Level 1

云服务器 GPU云服务器 blend -compose compose Blend菜鸟求助

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115214.html

mix-blend-mode及background-blend-mode实现炫酷的图片样式

摘要：在网上看到了有如相机功能的实现比较好看的图片样式，自己也想弄下，在这里记录下效果图相关属性正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色在网上看到了有如相机功能的mix-blend-mode实现比较好看的图片样式，自己也想弄下，在这里记录下 1.效果图 showImg(https://segmentfault.com/img/bVblsM0?w=726&...

gougoujiang 2019-08-30 15:54 评论0 收藏0
mix-blend-mode及background-blend-mode实现炫酷的图片样式

摘要：在网上看到了有如相机功能的实现比较好看的图片样式，自己也想弄下，在这里记录下效果图相关属性正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色在网上看到了有如相机功能的mix-blend-mode实现比较好看的图片样式，自己也想弄下，在这里记录下 1.效果图 showImg(https://segmentfault.com/img/bVblsM0?w=726&...

jackwang 2019-08-23 14:13 评论0 收藏0
探究 CSS 混合模式滤镜导致 CSS 3D 失效问题

摘要：滤镜也会导致失效完了吗没有。上文中的是什么上文的准确而言是什么我也无法确定，推测应该是，帧缓存对象，存在于显存中。帧缓存是一些二维数组和所使用的存储区的集合颜色缓存深度缓存模板缓存和累计缓存。今天在写一个小的 CSS Demo，一个关于 3d 球的旋转动画，关于 CSS 3D，少不了会使用下面这几个属性： { transform-style: preserve-3d; ...

Betta 2019-08-30 15:54 评论0 收藏0
CSS3之mix-blend-mode

摘要：在线编辑属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色亮度初始继承复原在线编辑参考资料原文地址 showImg(https://segmentfault.com/img/remote/1460000014766135); 在线编辑demo 属性描述了元素的内容应该与元素的直系父元素的内容...

stdying 2019-08-29 15:19 评论0 收藏0