首頁 > web前端 > js教程 > 主體

javascript計算漸層色實例分享

小云云
發布: 2018-02-03 13:43:45
原創
1906 人瀏覽過

本文主要和大家介紹javascript計算漸變顏色的實例的相關資料,希望透過本文能幫助到大家,讓大家理解掌握這部分內容,需要的朋友可以參考下,希望能幫助到大家。

javascript計算漸層顏色的實例

有時候,一個表格或一片區域內,需要若干同色系從淺到深的顏色,如圖所示:  

如果需要的顏色少,則顏色的差異較大,所需的顏色多,則顏色差異小,如下圖:

 


這時,就用到了同色系漸層顏色的計算,演算法如下:


function getItemColors (colorLevel) { 
  var colors= []; 
  //默认的最深颜色 
  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; 
}
登入後複製

相關建議:

html5 canvas繪製放射性漸層色效果代碼實例

CSS3中的顏色值RGBA以及漸變色的具體詳解(圖)

div+css背景漸層程式碼範例

以上是javascript計算漸層色實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!