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

この記事では主に 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 サイトの他の関連記事を参照してください。