Compose 和 Blend（一）

AbnerMing 發布于2019-08-30 12:59 / 1934人閱讀

摘要：瀏覽器渲染過程在講和之前，我想先介紹一下瀏覽器整個的渲染過程。這一步是渲染的最后一步，他的作用是將不同的圖層合在一起。和其它步驟有所不同的是，這一步有時會有的參與，比如，等元素都是由進行操作的。

瀏覽器渲染過程

在講 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菜鳥求助

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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