javascript計算漸變顏色的實例

更新時間：2017年09月22日 09:35:48 作者：lynnlysh

這篇文章主要介紹了javascript計算漸變顏色的實例的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下

javascript計算漸變顏色的實例

有時候，一個表格或者一片區(qū)域內(nèi)，需要若干同色系從淺到深的顏色，如圖所示：

如果需要的顏色少，則顏色的差異較大，需要的顏色多，則顏色差異小，如下圖：

這時，就用到了同色系漸變顏色的計算，算法如下：

function getItemColors (colorLevel) { 
  var colors= []; 
  //默認(rèn)的最深顏色 
  var red = 134,green = 108, blue = 184; 
  //最淺顏色是239,239,239 比如：最淺顏色的red是 239 則差值為239-134=105 
  var maxRed = 105,maxGreen = 131,maxBlue = 55; 
  var level = colorLevel; 
  while(level--) { 
    colors.push( 'rgb('+red +','+green+','+blue+')'); 
    red += parseInt(maxRed/colorLevel); 
    green += parseInt(maxGreen/colorLevel); 
    blue += parseInt(maxBlue/colorLevel); 
  } 
  return colors; 
}

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

JS獲取時間的方法
這篇文章主要介紹了JS獲取時間的方法,涉及date的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
Jquery+javascript實現(xiàn)支付網(wǎng)頁數(shù)字鍵盤
這篇文章主要為大家詳細(xì)介紹了Jquery+javascript實現(xiàn)支付網(wǎng)頁數(shù)字鍵盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
JS正則表達(dá)式獲取分組內(nèi)容的方法詳解
這篇文章主要介紹了JS正則表達(dá)式獲取分組內(nèi)容的方法，有需要的朋友可以參考一下
2013-11-11
uniapp中如何修改圖標(biāo)和名稱
這篇文章主要給大家介紹了關(guān)于uniapp中如何修改圖標(biāo)和名稱的相關(guān)資料,uni-app是一個使用Vue.js開發(fā)跨平臺應(yīng)用的前端框架,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
webpack前端應(yīng)用之基礎(chǔ)打包實現(xiàn)
本文主要介紹了webpack前端應(yīng)用之基礎(chǔ)打包實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
JavaScript中閉包之淺析解讀(必看篇)
下面小編就為大家?guī)硪黄狫avaScript中閉包之淺析解讀(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript登錄記住密碼操作(超簡單代碼)
本文給大家分享一段簡單的js代碼實現(xiàn)用戶登錄記住密碼操作，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-03-03
JavaScript中alert的使用方法超詳細(xì)介紹
JS中的alert作用是在瀏覽器中彈出一個警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關(guān)于JavaScript中alert使用方法的相關(guān)資料,需要的朋友可以參考下
2024-01-01
echarts中tooltip添加點(diǎn)擊事件代碼示例
這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點(diǎn)擊事件的相關(guān)資料,echarts tooltip點(diǎn)擊事件是指當(dāng)用戶點(diǎn)擊圖表中的提示框(tooltip)時觸發(fā)的事件,需要的朋友可以參考下
2023-07-07
JavaScript使用Broadcast?Channel實現(xiàn)前端跨標(biāo)簽頁通信
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用Broadcast?Channel實現(xiàn)前端跨標(biāo)簽頁通信,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04