#javascript #canvas #gradient
#javascript #холст #градиент
Вопрос:
Я экспериментировал с HTML5 и градиентными затуханиями, я хотел бы использовать 3 цвета и постепенно сливать их друг с другом. В настоящее время я могу заставить его работать только с использованием двух цветов.
Моя цель — нечто похожее на это изображение:
Цвета должны медленно переходить друг в друга, я доволен эффектом затухания, который у меня сейчас работает, хотя хотел бы добавить третий цвет.
Я попытался добавить массив используемых цветов, но функция цвета была изменена из учебника (добавлю ссылку, если смогу найти) и не совсем уверен, как это сделать.
Может ли кто-нибудь предложить какое-либо дополнение?
Заранее спасибо.
Я не пытаюсь заставить его выглядеть точно так же, как изображение, но если бы я мог просто добавить другой цвет к моей текущей версии, это должно быть хорошо.
Редактировать: из-за путаницы: я не ищу «статический» градиент, если вы внимательно посмотрите на мой пример, вы увидите эффект затухания. Я хочу добиться того же эффекта, но иметь градиент с 3 цветами и выглядеть похожим на изображение выше.
Он должен «мерцать» и постепенно исчезать. Предлагаю награду, поскольку я борюсь с созданием этого с 3 цветами, что, я думаю, будет легко для большинства..
Комментарии:
2. Подождите… вы делаете это в стиле a
<canvas>, а не в стиле HTML5 / CSS3 «линейный градиент»… это то, что вы предпочитаете?3. Я хочу, чтобы он работал в как можно большем количестве браузеров, и с помощью ex-canvas я надеялся добавить поддержку IE. Можно ли сделать аналогичный эффект в HTML5 / CSS3 с затуханием?
4. Хорошо, проверьте этот сайт генератора градиентов — в нем есть некоторые положения для IE, и он дает вам то, что кажется довольно переносимым CSS. ( редактировать на самом деле для старых браузеров IE похоже, что он действительно не может этого сделать, используя только старые свойства преобразования «фильтра».)
5. @c69 Вопрос в том, как заставить эти цвета переходить друг в друга?
Ответ №1:
Если вам не нужно выполнять сложную анимацию, вы выполняете некоторые крайне ненужные вычисления для вашего градиента. Суть градиента в том, что вы даете ему некоторые начальные значения, и он автоматически генерирует все промежуточные значения.
Я разработал образец градиента, который похож на ваше эталонное изображение: http://jsfiddle.net/ZFayC/2 /
Обратите внимание, что похоже, что ваше эталонное изображение может иметь небольшое количество текстуры, и что градиент определенно не линейный. Если вы хотите воссоздать эталонное изображение, вам придется использовать некоторые радиальные градиенты и, возможно, наложить текстуру.
Также обратите внимание, что вы настраивали холст width и height через свойства CSS. С помощью элемента canvas CSS width и height управляет увеличением элемента, в то время как атрибуты уровня DOM управляют фактическими размерами.
Редактировать: я полностью упустил тот факт, что вы хотели создать анимированный градиент. Приношу свои извинения за это.
Я вернулся и отредактировал свой пример, чтобы плавно переходить между тремя предопределенными цветами, похожими на те, что в вашем эталонном изображении. Вы можете просмотреть обновленный пример здесь:
Это больше соответствует тому, что вы ищете?
Редактировать: вот еще одно обновление, которое добавляет полноэкранную поддержку, диагональный градиент и дополнительный радиальный градиент, который накладывается посередине, чтобы внести некоторое разнообразие:
Возможно, вы захотите немного настроить цвета, чтобы увеличить вариативность, но, надеюсь, функциональность уже есть.
Комментарии:
1. Привет, спасибо за то, что это выглядит хорошо. Хотя моей главной проблемой было заставить цвета переходить друг в друга, как в моей демонстрации? Спасибо.
2. @Elliott я не совсем понимаю, что вы ищете. Цвета в моем примере переходят друг в друга. Я что-то упускаю?
3. Затухание статично, если вы посмотрите на мой пример, вы увидите, что цвета затухают и исчезают друг из друга. Вот почему у меня есть весь дополнительный код. Спасибо.
4. @Elliott Ах, мои извинения. Я как-то полностью пропустил тонкие цветовые колебания в вашем примере. Я чувствую, что вы должны быть в состоянии достичь того, что ищете, динамически обновляя только значения цвета и сохраняя неизменными местоположения остановок. Это сделало бы ваш код намного чище и намного более понятным. Например,
color1сдвигается наcolor2,color2сдвигается наcolor3иcolor3сдвигается наcolor1(и так далее, по кругу в цикле).5. Я пытался это сделать, и кажется, что он «прыгает» и не такой гладкий, как сейчас, — теперь предлагает награду.
Ответ №2:
Я думаю, что, применяя определенные приемы, это не должно иметь большого значения, используя свойства CSS3 вот игровая площадка,