漸變色原理

2021-08-30 23:37:38 字數 1128 閱讀 5545

[引用][

作為計算機圖形學中重要的原色混合系統, rgb(紅綠藍)加色系統廣泛應用於發光體, 如彩色crt顯示或彩色燈光. 這三種單色是得以匹配或生成可見光譜中幾乎所有顏色的最小數量的原色.

為了適應不同的顏色深度, 使用0-1來表示r, g, b顏色深淺. 使用三維座標分別表示rgb. 如下圖1所示. 這樣原點rgb(0, 0, 0)就表示黑色, 而原點對應的頂點rgb(1, 1, 1)就表示白色. 使用三維表示的好處就在於直觀, 以及在顏色變化過程中容易得到顏色變化的規律.

實現漸變色與影象疊加效果

(圖1)

在圖1所表示的空間中(點表示為 (r, g, b), 0≤r≤1, 0≤g≤1,0≤b≤1). 現在假設有某顏色(比如圖1中的點q), 其值為(r, g, b). 那麼從黑色到該顏色的點(在圖1中就對應從點(0,0,0)到點q(r, g, b)的線段)從視覺上是越來越淺. 設這些點的座標為(x, y, z)(0≤x≤r, 0≤y≤≤g, 0≤z≤b), 那麼在我們的rgb三維座標空間中就有方程:

公式1

(公式1)

(注意: 這裡處理的點都是三維模型所表示的立體內的點, 其中邊界情況請讀者自行考慮)

從該點到白色的點(在圖1中就對應從點q(r, g, b)到點(1, 1, 1)的線段)的顏色繼續變淺. 設這些點的座標為(x, y, z)(r≤x≤1, g≤y≤1, b≤z≤1), 那麼這些點滿足方程:

公式2

(公式2)

(注意: 同上, 這裡處理的點都是三維模型所表示的立體內的點, 其中邊界情況請讀者自行考慮)

根據以上原理,要實現漸變色,只需要按照三維直接座標變換過程著色即可。三維直線方程為:

(x-x1)/(x2-x1)=(y-y1)/(y2-y1)=(z-z1)/(z2-z1)
其中,起始點為(x1,y1,z1),終止點為(x2,y2,z2),也就是對應於我們的起始顏色和結束顏色的rgb值。

取某一邊為漸近過程,對應的算出另兩條邊的值,就可以組合出對應的某點的顏色。

例如,有起始顏色:(255,0,0)和結束顏色(0,255,0),按漸變過程,每個顏色畫兩條豎線得到的圖如下:

啟始顏色:(255,0,255)和結束顏色(0,255,255)得到的漸變圖為:

繪製漸變色

迴圈改變的畫素值,請注意每一行使用乙個顏色。int data new int fontimage.getwidth fontimage.getheight fontimage.getrgb data,0,fontimage.getwidth 0,0,fontimage.getwidth fontim...

CSS樣式 漸變色

background linear gradient 實現漸變色,這裡使用background屬性中的linear gradient 線性漸變 值 這都好理解,就後面這個值的屬性不好理解。首先,第乙個值是angle或者point,也就是角度或者方向。意思你要實現從什麼到什麼的漸變色。單位為deg d...

背景及漸變色

範圍內平鋪 background repeat repeat x 橫行平鋪一行 background repeat repeat y 豎向平鋪一列 background repeat no repeat 無平鋪效果 背景相關的所有屬性都寫在一行 background red url image do...