Цветовой градиент JavaScript

Question

Цветовой градиент JavaScript

Используя JavaScript с или без JQuery, мне нужно к создаванию градиента цветов на основе цвета конца и запуска. Действительно ли это возможно сделать программно?

Конечный цвет только будет еще более темным оттенком исходного цвета, и это для незаказанного списка, который я не имею никакого контроля над количеством объектов лития. Я ищу решение, которое позволяет мне выбирать запуск и конечный цвет, преобразовывать шестнадцатеричное значение в RGB, таким образом, этим можно управлять в коде. Стартовые значения RGB увеличены значением шага, вычисленным основанный на количестве объектов.

таким образом, если бы список имел 8 объектов затем, то это должно увеличить отдельные Красные Зеленые Синие значения на 8 шагах для достижения итогового цвета. Существует ли лучший способ сделать это и раз так где я могу найти некоторый пример кода?

44

javascript jquery colors rgb gradient

задан Benjamin 31 March 2014 в 09:10

2 ответа

Другие вопросы по тегам:

javascript jquery colors rgb gradient

Похожие вопросы:

score 22 · Answer 1

Да, конечно.

Я делаю это на Java, должно быть довольно просто сделать и в JavaScript.

Во-первых, вам нужно разбить цвета на компоненты RGB.

Затем вычислите разницу между началом и концом компонентов.

Наконец, вычислите процентную разницу и умножьте на начальный цвет каждого компонента, затем добавьте его к начальному цвету.

Предполагая, что вы можете получить значения RGB, это должно сделать это:

var diffRed = endColor.red - startColor.red;
var diffGreen = endColor.green - startColor.green;
var diffBlue = endColor.blue - startColor.blue;

diffRed = (diffRed * percentFade) + startColor.red;
diffGreen = (diffGreen * percentFade) + startColor.green;
diffBlue = (diffBlue * percentFade) + startColor.blue;

«ПроцентFade» - это плавающая десятичная дробь, показывающая, насколько далеко перейти в «endColor». 1 будет полным исчезновением (создавая конечный цвет). 0 не будет исчезать (начальный цвет).

score 0 · Answer 2

Вы можете получить список элементов. Я не знаком с jQuery, но у prototypejs есть Element.childElements (), который вернет массив. Как только вы узнаете длину массива, вы можете определить, насколько нужно изменять пиксельные компоненты для каждого шага. Часть следующего кода, которую я не тестировал в том виде, в котором я его представляю, должен дать вам представление.

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