Heim  >  Artikel  >  Web-Frontend  >  Teilen von Farbverlaufsbeispielen für Javascript-Berechnungen

Teilen von Farbverlaufsbeispielen für Javascript-Berechnungen

小云云
小云云Original
2018-02-03 13:43:451880Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich relevante Informationen zur Berechnung von Verlaufsfarben in JavaScript vor. Ich hoffe, dass dieser Artikel Ihnen helfen kann, diesen Teil des Inhalts zu verstehen und zu beherrschen Dir helfen.

Beispiel für die Javascript-Berechnung der Verlaufsfarbe

Manchmal benötigt eine Tabelle oder ein Bereich mehrere Farben derselben Farbe von hell bis dunkel, wie in gezeigt Die Abbildung zeigt:

Wenn nur wenige Farben benötigt werden, ist der Farbunterschied groß. Wenn mehr Farben benötigt werden, ist der Farbunterschied gering unten gezeigt:


Zu diesem Zeitpunkt wird die Berechnung der Verlaufsfarbe desselben Farbsystems verwendet lautet wie folgt:


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; 
}

Verwandte Empfehlungen:

HTML5-Leinwandzeichnung, radioaktiver Farbverlauf, Codebeispiel für Farbeffekte

Farbwert RGBA in CSS3 und detaillierte Erklärung der Verlaufsfarbe (Bild)

Div+CSS-Hintergrundverlaufsfarbcode-Beispiel

Das obige ist der detaillierte Inhalt vonTeilen von Farbverlaufsbeispielen für Javascript-Berechnungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So verwenden Sie Vee-ValidateNächster Artikel:So verwenden Sie Vee-Validate