Javascript計算のグラデーションカラー例の共有

小云云
リリース: 2018-02-03 13:43:45
オリジナル
1918 人が閲覧しました

この記事では主に 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 キャンバス描画放射性グラデーション カラー効果のコード例

CSS3 のカラー値 RGBA とグラデーション カラーの詳細な説明 (画像)

div+css背景グラデーションカラーコード例

以上がJavascript計算のグラデーションカラー例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート