Dégradé de couleurs en Javascript

Question

En utilisant javascript avec ou sans Jquery, je dois créer un gradient de couleurs à partir d'une couleur de départ et d'arrivée. Est-ce possible de le faire par programme ?

La couleur finale ne sera jamais qu'une nuance plus foncée de la couleur de départ et c'est pour une liste non ordonnée dont je n'ai aucun contrôle sur le nombre d'éléments. Je cherche une solution qui me permette de choisir une couleur de début et de fin, de convertir la valeur hexadécimale en RVB afin de pouvoir la manipuler dans le code. Les valeurs RVB de départ sont incrémentées d'une valeur progressive calculée en fonction du nombre d'éléments.

Ainsi, si la liste comporte 8 éléments, il faut incrémenter les valeurs rouge, vert et bleu en 8 étapes pour obtenir la couleur finale. Existe-t-il une meilleure façon de procéder et si oui, où puis-je trouver un exemple de code ?

Answer 1

Vous pouvez récupérer la liste des éléments. Je ne suis pas familier avec jQuery, mais prototypejs a Element.childElements() qui retournera un tableau. Une fois que vous connaissez la longueur du tableau, vous pouvez déterminer de combien il faut changer les composants des pixels pour chaque étape. Je n'ai pas encore testé une partie du code suivant dans la forme dans laquelle je le présente, mais cela devrait vous donner une idée.

function hex (c) {
  var s = "0123456789abcdef";
  var i = parseInt (c);
  if (i == 0 || isNaN (c))
    return "00";
  i = Math.round (Math.min (Math.max (0, i), 255));
  return s.charAt ((i - i % 16) / 16) + s.charAt (i % 16);
}

/* Convert an RGB triplet to a hex string */
function convertToHex (rgb) {
  return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
}

/* Remove '#' in color hex string */
function trim (s) { return (s.charAt(0) == '#') ? s.substring(1, 7) : s }

/* Convert a hex string to an RGB triplet */
function convertToRGB (hex) {
  var color[];
  color[0] = parseInt ((trim(hex)).substring (0, 2), 16);
  color[1] = parseInt ((trim(hex)).substring (2, 4), 16);
  color[2] = parseInt ((trim(hex)).substring (4, 6), 16);
}

/* The start of your code. */
var start = convertToRGB ('#000000');    /* The beginning of your gradient */
var end   = convertToRGB ('#ffffff');    /* The end of your gradient */
var arr = $('.gradientList').childElements();
var len = arr.length();                  /* The number of colors to compute */
var alpha = 0.5;                         /* Alpha blending amount */

for (i = 0; i < len; i++) {
    var c = [];

    c[0] = start[0] * alpha + (1 - alpha) * end[0];
    c[1] = start[1] * alpha + (1 - alpha) * end[1];
    c[2] = start[2] * alpha + (1 - alpha) * end[2];

    /* Set the background color of this element */
    arr[i].setStyle ({ 'background-color': convertToHex (c) });
}

Answer 2

Javascript de base - Dégradé d'arrière-plan

Voici une fonction prête à l'emploi qui permet de définir un dégradé comme arrière-plan d'un élément.

Utilisation de CSS

Element.prototype.setGradient = function( from, to, vertical ){
   this.style.background = 'linear-gradient(to '+(vertical ? 'top' : 'left')+', '+from+', '+to+' 100%)';
}

Et Usage :

document.querySelector('.mydiv').setGradient('red','green');

Ceci a été testé avec chrome, je vais essayer de mettre à jour pour les autres navigateurs.

Utilisation de Canvas

L'horizontale la plus basique serait :

Element.prototype.setGradient = function( fromColor, toColor ){

    var canvas = document.createElement('canvas');
    var ctx    = canvas.getContext('2d');
    var b      = this.getBoundingClientRect();
    var grd    = ctx.createLinearGradient(0, 0, b.width, 0);

    canvas.width = b.width;
    canvas.height = b.height;

    grd.addColorStop(0, fromColor);
    grd.addColorStop(1, toColor);

    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, b.width, b.height);

    this.style.backgroundImage = 'url('+canvas.toDataURL()+')';
}

Et Usage :

document.querySelector('.mydiv').setGradient('red','green');

Un violon : https://jsfiddle.net/jch39bey/

-

Ajout d'un dégradé vertical

Un simple drapeau pour définir la verticale

Element.prototype.setGradient = function( fromColor, toColor, vertical ){

    var canvas = document.createElement('canvas');
    var ctx    = canvas.getContext('2d');
    var b      = this.getBoundingClientRect();
    var grd    = ctx.createLinearGradient(0, 0, vertical ? 0 : b.width, vertical ? b.height : 0);

    canvas.width = b.width;
    canvas.height = b.height;

    grd.addColorStop(0, fromColor);
    grd.addColorStop(1, toColor);

    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, b.width, b.height);

    this.style.backgroundImage = 'url('+canvas.toDataURL()+')';
}

Et Usage :

document.querySelector('.mydiv').setGradient('red','green',true);

Answer 3

En se basant sur la réponse de @desau et sur du code provenant d'ailleurs, voici une marche à suivre étape par étape pour jQuery :

function coloursBetween(fromColour, toColour, numberOfColours){

    var colours = []; //holds output
    var fromSplit = getRGBAValues(hexToRGBA(fromColour, 1.0)); //get raw values from hex
    var toSplit = getRGBAValues(hexToRGBA(toColour, 1.0));

    var fromRed = fromSplit[0]; //the red value as integer
    var fromGreen = fromSplit[1];
    var fromBlue = fromSplit[2];

    var toRed = toSplit[0];
    var toGreen = toSplit[1];
    var toBlue = toSplit[2];

    var difRed = toRed - fromRed; //difference between the two
    var difGreen = toGreen - fromGreen;
    var difBlue = toBlue - fromBlue;

    var incrementPercentage = 1 / (numberOfColours-1); //how much to increment percentage by

    for (var n = 0; n < numberOfColours; n++){

        var percentage = n * incrementPercentage; //calculate percentage 
        var red = (difRed * percentage + fromRed).toFixed(0); //round em for legibility
        var green = (difGreen * percentage + fromGreen).toFixed(0);
        var blue = (difBlue * percentage + fromBlue).toFixed(0);
        var colour = 'rgba(' + red + ',' + green + ',' + blue + ',1)'; //create string literal
        colours.push(colour); //push home

    }

    return colours;
}
function getRGBAValues(string) {

  var cleaned = string.substring(string.indexOf('(') +1, string.length-1);
  var split = cleaned.split(",");
  var intValues = [];
  for(var index in split){
      intValues.push(parseInt(split[index]));
  }
  return intValues;
}
function hexToRGBA(hex, alpha){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+alpha+')';
    }
    return rgba(0,0,0,1);
    //throw new Error('Bad Hex');
}

Il existe trois fonctions :

1. coloursBetween(fromColour, toColour, numberOfColours)
2. getRGBAValues(string)
3. hexToRGBA(hex, alpha)

Appeler la fonction principale coloursBetween() en indiquant la couleur de départ et la couleur d'arrivée, ainsi que le nombre total de couleurs que vous souhaitez obtenir. Ainsi, si vous demandez le retour de dix couleurs, vous obtiendrez la première couleur de départ + 8 couleurs dégradées + la dernière couleur de fin.

La fonction coloursBetween commence par convertir les couleurs hexagonales entrantes (par exemple #FFFFFF, #000000) en rgba (par exemple rgba(255,255,255,1) rgba(0,0,0,1)), puis soustrait les valeurs rouge, verte et bleue de chacune.

La différence entre les Rouges, les Verts et les Bleus est ensuite calculée. Dans cet exemple, elle est de -255 dans chaque cas. Un incrément est calculé et utilisé pour multiplier de nouvelles valeurs incrémentales pour le rouge, le vert et le bleu. L'alpha est toujours supposé être égal à un (opacité totale). La nouvelle valeur est ensuite ajoutée au tableau des couleurs et, une fois la boucle for terminée, elle est renvoyée.

Enfin, appelez comme ceci (en allant du rouge au bleu) :

var gradientColours = coloursBetween("#FF0000", "#0000FF", 5);

que vous pouvez utiliser pour quelque chose comme ceci :