成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Compose 和 Blend（一）

AbnerMing / 1952人閱讀

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

瀏覽器渲染過程

在講 compose 和 blend 之前，我想先介紹一下瀏覽器整個(gè)的渲染過程。
瀏覽器在渲染頁面的時(shí)候，大概會(huì)走幾個(gè)步驟：layout,repaint,compose。

layout 過程中要做的事就是計(jì)算元素的位置和尺寸，所以我們在改變一個(gè)元素尺寸，或者 overflow，position 等屬性的時(shí)候就會(huì)觸發(fā)頁面的重新布局，有人也把這叫做 reflow(回流)。所以我們在很多講前端動(dòng)畫的文章中，都說要盡量避免頁面回流。

repaint 這個(gè)步驟就好理解了，這一步就是給元素上色。更改元素的 color ， background-color 等屬性都會(huì)導(dǎo)致 repaint。

compose 這一步是渲染的最后一步，他的作用是將不同的圖層合在一起。和其它步驟有所不同的是，這一步有時(shí)會(huì)有 GPU 的參與，比如 canvas， video 等元素都是由 GPU 進(jìn)行 compose 操作的。

Compose 合成

compose 的功能就是將兩張圖合成一張圖，下面的圖例中 destination 就是背景， source 就是前景，他們之間疊加的部分叫做 backdrop。

compose 的操作大概有下面幾種

clear

前景和背景都不顯示

copy

只會(huì)顯示前景

destination

只會(huì)顯示背景

source over

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

destination over

背景在前景之上

source in

只顯示重疊區(qū)域中前景的部分

destination in

只顯示重疊區(qū)域中背景的部分，有點(diǎn)類似 svg 中的 clip-path

source out

將重疊的區(qū)域從前景移除

destination out

將重疊的區(qū)域從背景移除

source atop

將重疊區(qū)域替換為前景

destination atop

將重疊區(qū)域替換為背景

XOR

去除重疊的區(qū)域

參考：

globalCompositeOperation

W3C Compositing and Blending Level 1

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115214.html

相關(guān)文章

  • mix-blend-mode及background-blend-mode實(shí)現(xiàn)炫酷的圖片樣式

    摘要：在網(wǎng)上看到了有如相機(jī)功能的實(shí)現(xiàn)比較好看的圖片樣式，自己也想弄下，在這里記錄下效果圖相關(guān)屬性正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強(qiáng)光柔光差值排除色相飽和度顏色 在網(wǎng)上看到了有如相機(jī)功能的mix-blend-mode實(shí)現(xiàn)比較好看的圖片樣式，自己也想弄下，在這里記錄下 1.效果圖 showImg(https://segmentfault.com/img/bVblsM0?w=726&...

    gougoujiang 評(píng)論0 收藏0

  • mix-blend-mode及background-blend-mode實(shí)現(xiàn)炫酷的圖片樣式

    摘要：在網(wǎng)上看到了有如相機(jī)功能的實(shí)現(xiàn)比較好看的圖片樣式，自己也想弄下，在這里記錄下效果圖相關(guān)屬性正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強(qiáng)光柔光差值排除色相飽和度顏色 在網(wǎng)上看到了有如相機(jī)功能的mix-blend-mode實(shí)現(xiàn)比較好看的圖片樣式，自己也想弄下，在這里記錄下 1.效果圖 showImg(https://segmentfault.com/img/bVblsM0?w=726&...

    jackwang 評(píng)論0 收藏0

  • 探究 CSS 混合模式濾鏡導(dǎo)致 CSS 3D 失效問題

    摘要：濾鏡也會(huì)導(dǎo)致失效完了嗎沒有。上文中的是什么上文的準(zhǔn)確而言是什么我也無法確定，推測應(yīng)該是，幀緩存對(duì)象，存在于顯存中。幀緩存是一些二維數(shù)組和所使用的存儲(chǔ)區(qū)的集合顏色緩存深度緩存模板緩存和累計(jì)緩存。 今天在寫一個(gè)小的 CSS Demo，一個(gè)關(guān)于 3d 球的旋轉(zhuǎn)動(dòng)畫，關(guān)于 CSS 3D，少不了會(huì)使用下面這幾個(gè)屬性： { transform-style: preserve-3d; ...

    Betta 評(píng)論0 收藏0

  • CSS3之mix-blend-mode

    摘要：在線編輯屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強(qiáng)光柔光差值排除色相飽和度顏色亮度初始繼承復(fù)原在線編輯參考資料原文地址 showImg(https://segmentfault.com/img/remote/1460000014766135); 在線編輯demo 屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容...

    stdying 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<