Maison > interface Web > js tutoriel > le corps du texte

Partage d'exemples de couleurs de dégradé de calcul Javascript

小云云
Libérer: 2018-02-03 13:43:45
original
1923 Les gens l'ont consulté

Cet article vous présente principalement des informations pertinentes sur les exemples de calcul des couleurs de dégradé en JavaScript. J'espère que cet article pourra vous aider à comprendre et à maîtriser cette partie du contenu. Les amis qui en ont besoin pourront s'y référer. t'aider.

Exemple de calcul javascript de dégradé de couleur

Parfois, un tableau ou une zone a besoin de plusieurs couleurs de la même couleur du clair au foncé, comme indiqué dans la figure Comme indiqué :

Si peu de couleurs sont nécessaires, la différence de couleur sera grande, si plus de couleurs sont nécessaires, la différence de couleur sera faible, car ; montré ci-dessous :


À ce stade, le calcul de la couleur du dégradé du même système de couleurs est utilisé. est la suivante :


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; 
}
Copier après la connexion

Recommandations associées :

Exemple de code d'effet de couleur de dégradé radioactif de dessin sur toile HTML5

Valeur de couleur RGBA en CSS3 et explication détaillée de la couleur du dégradé (image)

Exemple de code de couleur de dégradé d'arrière-plan div+css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal