Blog. Just Blog

Градиентный фон на PHP

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Градиентный фон на PHP
Градиентный фон на PHP

Продолжаем работать с графикой на PHP. Сегодня будем рисовать градиентную заливку фона, когда один цвет плавно перетекает в другой.

Для горизонтального градиента у меня получился следующий скрипт. Размеры фона, а также начальные и конечные цвета задаются в первых строчках.
  1. // Размеры изображения
  2. $width=600;
  3. $height=225;
  4. // Начальный цвет градиента
  5. $start_color=0x55FFFF;
  6. // Конечный цвет градиента
  7. $end_color=0xFF0000;
  8.  
  9. $R1=($start_color >> 16) & 0xFF;
  10. $G1=($start_color >> 8) & 0xFF;
  11. $B1=$start_color 0xFF;
  12.  
  13. $R2=($end_color >> 16) & 0xFF;
  14. $G2=($end_color >> 8) & 0xFF;
  15. $B2=$end_color 0xFF;
  16.  
  17. $im=ImageCreateTrueColor($width$height);
  18.  
  19. // Нарисовать горизонтальный градиент
  20. for ($x=0$x<$width$x++) {
  21.     $R=$R1-round(($R1-$R2)/$width*$x);
  22.     $G=$G1-round(($G1-$G2)/$width*$x);
  23.     $B=$B1-round(($B1-$B2)/$width*$x);
  24.     $color=ImageColorAllocate($im,$R,$G,$B);
  25.     ImageLine($im,$x,0,$x,$height,$color);
  26. }
После этого готовое изображение можно вывести в браузер или использовать для дальнейшей работы, накладывая на него нужные элементы. Чтобы нарисовать вертикальный градиент, немного меняется основной цикл, остальные параметры остаются прежними:
  1. // Нарисовать вертикальный градиент
  2. for ($y=0$y<$height$y++) {
  3.     $R=$R1-round(($R1-$R2)/$height*$y);
  4.     $G=$G1-round(($G1-$G2)/$height*$y);
  5.     $B=$B1-round(($B1-$B2)/$height*$y);
  6.     $color=ImageColorAllocate($im,$R,$G,$B);
  7.     ImageLine($im,0,$y,$width,$y,$color);
  8. }
Градиентный фон можно использовать, например, для создания эффектной рамки вокруг превьюшки на основании усредненного цвета верхней и нижней границы изображения. Также можно сделать более сложный вариант, например, тройной градиент, в этом случае фон до половины заливается градиентом от Цвета1 до Цвета2, а от половины до конца от Цвета2 до Цвета3. Это вы уже можете сделать самостоятельно.

Градиентный фон на PHP
Градиентный фон на PHP

Более сложный градиент можно получить, если цвет пересчитывается динамически для каждой точки. Времени на это потребуется больше, чем на рисование отдельных линий, но и результат выглядит гораздо лучше.
  1. $width=600;
  2. $height=450;
  3.  
  4. $im=ImageCreateTrueColor($width$height);
  5.  
  6. for ($x=0$x<$width$x++) {
  7.     for ($y=0$y<$height$y++) {
  8.         $gradient=ImageColorAllocate($im,
  9.             (255/$width)*$x,
  10.             (255/$height)*$y,
  11.             255
  12.         );
  13.         ImageSetPixel($im,$x,$y,$gradient);
  14.     }
  15. }
Меняя коэффициент изменения, значение и положение фиксированной составляющей цвета, можно достигнуть очень интересных результатов. Примерно по такому же алгоритму рисуются, например, поля выбора цвета в графических редакторах.

Поделиться ссылкой ВКонтакте
Просмотров: 1891 | Комментариев: 1

Метки: PHP, графика
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (19.07.2023 в 14:13):
Добавил комплексный градиент.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0048 сек.) / Память: 4.5 Mb
Наверх