概要

本文通過解決一個假想的問題介紹了 css screen 混合模式，並介紹瞭如何用 svg 濾鏡、canvas 2d、canvas webgl 實現相同的效果。

問題

下面的圖片演示三種顏色光疊加的效果，請在 html 中實現這種效果。

三個不同顏色的光斑，重疊的部分符合加色法

約定

詞語	指代
混合	blend
加色	additive color - 名詞
特性	attribute，比如 `<a id=1>`，說 id 是元素 a 的特性
透明度	α、alpha
偽輸入影象	pseudo input image
著色器	shader
著色器程式	shader program
xml 應用程式	XML application
chrome	google chrome 41
firefox	firefox developer edition 40
ie	internet explorer 11
3 個瀏覽器	上面 3 個版本的瀏覽器

opera 已經基於 webkit 了，所以未測試 opera，若在 chrome 中可用那我就認為在 opera 中也可用。

分析

當然可以用 photoshop 製作圖片，html 用 <img>

引用該圖片，本文不討論這種方法。

觀察重疊部分發現該部分的顏色不僅受自己的影響、還受它下面背景顏色的影響，重疊部分的顏色是自己的顏色和背景顏色混合的結果。換句話說，一個畫素繪製出來的顏色等於畫素顏色和背景畫素顏色的混合，即

C=B(Cb,Cs)，其中，
C 是繪製的顏色
B 是混合函式
Cb 是背景顏色
Cs 是前景顏色，即畫素的顏色

這裡面 C 的 r、g、b 顏色分量都是 [0, 1] 的小數而不是 [0, 255] 的整數。顯然，對同一個畫素來說不同的 B 得到不同的 C。紅綠藍分別是 rgb(1, 0, 0)、rgb(0, 1, 0)、rgb(0, 0, 1)，B 如果滿足 B(Cb,

Cs)=min(Cs+Cb,1) 就能合成白色。

重點：不同的 B 得到不同的 C

不可行的方法

html 中經常用到下面 3 個方法，

css opacity 屬性
css rgba()/hsla() 顏色
用 <img> 引用帶 alpha 通道的影象

它們使用相同的混合函式，叫做 α 混合或簡單 α 複合，

C=B(Cb,Cs)=Cs×αs+Cb×αb×(1−αs)=Cs×αs+Cb×(1−αs)

αs 是前景透明度，αb 是背景透明度，上面的式子計算混合後的 r、g、b 顏色，混合後的透明度 αo 由公式 αo=αs+αb×(1−αs) 給出。很多時候背景不透明，即 αb 是 1，上面把 1 代入了 αb。

下面給上面的式子代入幾組實際值。設 Cs 是不透明紅 rgba(1, 0, 0, 1)，Cb 是不透明藍 rgb(0, 0, 1)，它倆混合的結果不用計算都知道仍然是不透明紅，計算過程如下，

r = 1 x 1 + 0 x (1 - 1) = 1
g = 0 x 1 + 0 x (1 - 1) = 0
b = 0 x 1 + 1 x (1 - 1) = 0

紅藍得紅，混合失敗。另外一組，Cs = rgba(1, 0, 0, 0.5)，Cb = rgb(0, 0, 1)，有，

r = 1 x 0.5 + 0 x (1 - 0.5) = 0.5
g = 0 x 0.5 + 0 x (1 - 0.5) = 0
b = 0 x 0.5 + 1 x (1 - 0.5) = 0.5

要想讓得到的 rgb(0.5, 0, 0.5) 和 rgb(0, 1, 0) 的綠色混合以得到 rgb(1, 1, 1) 的白色，α 需要滿足下面的方程組，

{0.5α+0α+0(1−α)=1(1−α)=1={0.5α=11−α=1={α=2α=0

上面的方程組無解，即無論如何設定 α 都無法通過 B 混合 rgb(0.5, 0, 0.5) 和 rgb(0, 1, 0) 得到 rgb(1, 1, 1)。

回過頭來觀察式子 Cs×αs+Cb×(1−αs)，可以看出結果介於 Cs 和 Cb 之間。紅綠藍混合時，白色的紅色分量只能通過紅色得到，這要求紅色的 α 是 1，但 α = 1 造成背景顏色藍或者綠被忽略，而忽略任何一個分量都無法得到白色。因此這個混合函式不合適。

可行的方法

如果可以自己逐一計算畫素的顏色，得出要求的效果自然不在話下。除了自己計算外，如果存在正好能夠實現要求效果的固定函式，則呼叫該函式也可以。

在 html 中處理顏色有 3 種工具，css、svg、canvas。

css

css 有個模組叫複合與混合，這個模組定義了若干固定函式，其中一個叫 screen，它的 B 是

C=B(Cb,Cs)=1−[(1−Cb)×(1−Cs)]=Cs+Cb

在 html 中用加色法混合顏色

概要

問題

約定

分析

不可行的方法

可行的方法

css

在 html 中用加色法混合顏色

資料結構__不含括號的加減乘除法混合運算

混合顏色的色值計算公式

在HTML中用js獲取通過GET、POST方法（就是在網址後加?a=b&c=d之類）傳過來的表單值

html中用href 實現點擊鏈接彈出文件下載對話框

html頁面加載流程

HTML添加樣式三種辦法

Html.EditorFor 加 htmlAttributes

HTML頁面加載和解析流程

兩種方法實現在HTML頁面加載完畢後運行某個js

JavaScript Html頁面加載完成三種寫法

vue打包空白，圖片沒加載，背景顏色沒有渲染出來-配置秘訣

CSS單位分析及CSS顏色表示法、顏色表（調色板）

CSS顏色表示法及顏色表

基於RGB差值法的顏色分割

在html中用js代替${pagecontext.request.getcontextpath}

BootStrap-CSS樣式_排版_強調(斜體加粗對齊顏色)

html中用css定義div的邊框樣式

『最小生成樹』Kruskal演算法——加邊法（並查集優化 + C++語言編寫 + 例題）

光與色的故事--顏色模型淺析

在 html 中用加色法混合顏色

概要

問題

約定

分析

不可行的方法

可行的方法

css

相關推薦