又是一個漸變色生成算法

背景

簡化了下背景，給定一個指標X，比較小的時候是正常的，比較大的時候比較危險。為了更直觀地地顯示，前端顯示的時候希望使用顏色來高亮這個值——比較小的時候顏色是綠色，較大的時候顯示紅色，並且用一些黃色進行過渡。

使用google搜了搜，沒有找到合適的代碼。於是乎，露珠自己打算搞個~貽笑大方了···

分析

顏色在HTML中可以用RGB值來表示——綠色是rgb(0,255,0), 紅色是rgb(255,0,0),黃色是rgb(255,255,0). 為了達到漸變效果，需要設計一個函數F:

F(0) = rgb(0,255,0);

F(比較大的值) = rgb(255,0,0);

F(中間的值) = rgb(255,255,0);

 

結果

函數貌似很復雜，但是調了一會就出來了，效果來不錯。

曬曬代碼：

/**
 * 生成漸變色，從綠色到紅色的漸變
 * @param int   $x          指標值
 * @param int   $threshold  漸變閾值，$x等於這個值的時候剛好是黃色
 * @param float $brightness 亮度，從0到1
 * @return string RGB格式的顏色值
 */
function generateGradientColor($x, $threshold, $brightness = 1){
    return sprintf('rgb(%d, %d, 0)',
                    intval(min(255, ($x * 1.0 / $threshold * 255)) * $brightness),
                    intval(max(0, min(255, (2 - $x * 1.0 / $threshold) * 255)) * $brightness));
}

效果

生成的漸變色的效果如下（threshold = 25）：

　　

附生成上述效果的PHP代碼：

<style>
    div{
        display: block;
        font-size: 10px;
        height: 1em;
    }
</style>

<?php
for ($i = 1; $i < 50; $i++){
    echo strtr("<div style='width: {width}em; background-color: {color}'>$i</div>", array(
        '{width}' => $i,
        '{color}' => generateGradientColor($i, 25)
    ));
}

?>