PHP: ¿Cómo logro crear un fondo en degradado lineal?

De Foros del Web

Si hablamos de un fondo en degradado lineal, la respuesta es bastante simple, podemos usar el método line y dibujar líneas con los colores que deseemos. Estos primeros ejemplos nos servirán para ver como podes definir colores


Código PHP:

<?php
header("Content-type:  image/png");
//definimos el tamaño de la  imagen
$alto = 60;
$ancho = 150;
$im = imagecreatetruecolor($ancho,$alto);
//definimos un color usando  imagecolorallocate 
$white = imagecolorallocate($im, 255,255,255);
imagefill($im,0,0,$white);
for ($i = 0; $i < $alto+1 ; $i  ++){ 
/*
int imageline ( int im,  int x1, int y1, int x2, int y2, int col) 
*/ 
imageline($im, 0, $i, $ancho, $i,  imagecolorallocate($im, 255 -  $r,255 - $g ,255 -$b) ); 
$r += 3;
$g += 3;
$b += 3;
} 
imagepng ($im);
imagedestroy($im);
?> 

Ahora simplemente cambiando la manera en que los r,g,b aumentan podemos conserguir "colores" como azules por ejemplo o aleatorios Para obtener azules:


Código PHP:

<?php
header("Content-type:  image/png");
$alto = 60;
$ancho = 150;
$im = imagecreatetruecolor($ancho,$alto);
$white = imagecolorallocate($im, 255,255,255);
imagefill($im,0,0,$white);
for ($i = 0; $i < $alto+1 ; $i  ++){ 
imageline($im, 0, $i,  $ancho, $i, imagecolorallocate($im, 255 - $r,255 - $g ,255 -$b) ); 
if($r < 255) $r  += 3;
if($g < 255)  $g += 2;
if($b < 255) $b += 1;
} 
imagepng ($im);
imagedestroy($im);
?> 

Para conseguir aleatorios :

Código PHP:

<?php
header("Content-type:  image/png");
$alto = 60;
$ancho = 150;
$im = imagecreatetruecolor($ancho,$alto);
$white = imagecolorallocate($im, 255,255,255);
imagefill($im,0,0,$white);
for ($i = 0; $i < $alto +1; $i  ++){ 
imageline($im, 0, $i,  $ancho, $i, imagecolorallocate($im, 255 - $r,255 - $g ,255 -$b) ); 
/*
int rand ( [int min [, int max]]) 
*/  
if($r < 255)  $r += Rand(0,5);
if($g <  255) $g += Rand(0,5);
if($b <  255) $b += Rand(0,5);
} 
imagepng ($im);
imagedestroy($im);
?> 

desde ya que pueden utilizar otras maneras para obtener colores aleatorios otra opción viendo los dos códigos anteriores es poner un rand (0,4), rand (0,3) y rand (0,2) y de esa manera obtener variantes en un color más determinado.

¿Cómo crear un degradado lineal inclinado?

Código PHP:

<?php
header("Content-type:  image/png");
$alto = 60;
$ancho = 150;
$im = imagecreatetruecolor($ancho,$alto);
$white = imagecolorallocate($im, 255,255,255);
imagefill($im,0,0,$white);
for ($i = -($alto* 0.5) ; $i < $alto *  1.5 ; $i ++){ 
imageline($im, 0, $i, $ancho, $i + $alto/2 , imagecolorallocate($im, 255 -  $r,255 - $g ,255 -$b) ); 
if($r < 255) $r += 1;
if($g < 255) $g  += 1;
if($b < 255)  $b += 2;
} 
imagepng  ($im);
imagedestroy($im);
?> 

¿Cómo realizar un degradado circular?

La manera mas fácil sin duda sería poner un serie de círculos concéntricos haciendo variar el color de cada uno, para eso tenemos la función imagefilledellipse que nos permite crear elipces

Código PHP:

<?php
header("Content-type:  image/png");
$alto = 150;
$ancho = 150;
$im = imagecreatetruecolor($ancho,$alto);
$white = imagecolorallocate($im, 255,255,255);
imagefill($im,0,0,$white);
for ($i = 0 ; $i < ($ancho / 2) ; $i  ++){
$radio = ($ancho  /2) - $i;
/*
bool  imagefilledellipse ( resource image, int cx, int cy, int w, int  h, int color)
*/ 
imagefilledellipse($im, $ancho /2, $alto /2 , $radio, $radio,imagecolorallocate($im, 255 - $r, 255 - $g,  255 -$b));
if($r <  255) $r += 3;
if($g < 255) $g  += 2;
if($b < 255)  $b += 1;
} 
imagepng  ($im);
imagedestroy($im);
?> 

a notar que todos los círculos son concéntricos si esto variara podemos obtener un efecto muy "divertido" y usando colores alpha podríamos observar las superposiciones


Código PHP:

<?php
header("Content-type:  image/png");
$alto = 150;
$ancho = 150;
$im = imagecreatetruecolor($ancho,$alto);
$white = imagecolorallocate($im, 255,255,255);
imagefill($im,0,0,$white);
for ($i = 0 ; $i < ($ancho / 2) ; $i  ++){
$radio = ($ancho  /2) - $i;
/*definimos un  color usando imagecolorallocatealpha , que es exactamente igual a  imagecolorallocate 
salvo que recibe un parametro extra que representa su  transparencia */
imagefilledellipse($im, rand(20,$ancho), rand(20,$alto) , $radio, $radio,imagecolorallocatealpha($im, 255 - $r, 255 - $g, 255 -$b,75));
if($r < 255) $r  += 3;
if($g <  255) $g += 2;
if($b < 255) $b  += 1;
} 
imagepng ($im);
imagedestroy($im);
?> 

De manera muy similar a lo anterior se puede responder a la pregunta de como hacer un degradado cuadrado, y sería poniendo un seria de cuadrados concentricos y ir cambiándolos de color y para esto tenemos imagerectangle

Código PHP:

<?php
header("Content-type:  image/png");
$alto = 150;
$ancho = 150;
$im = imagecreatetruecolor($ancho,$alto);
$white = imagecolorallocate($im, 255,255,255);
imagefill($im,0,0,$white);
for ($i = 0 ; $i < $ancho ; $i  ++){
/*
int imagerectangle ( int  im, int x1, int y1, int x2, int y2, int col) 
dibuja los bordes de un  rectangulo con coordenas de diagoan x1,y1 - x2y, y2 
*/ 
imagerectangle ($im, $i ,$i , $ancho - $i ,  $alto - $i, imagecolorallocate($im, 255 - $r,  255 - $g, 255 -$b));
if($i % 2 == 0) $r  += 3;
if($i % 3 == 0)  $g += 2;
if($b < 255) $b += 1;
} 
imagepng ($im);
imagedestroy($im);
?> 

Si quisiéramos volver a hacer ese efecto "divertido" que usamos con los círculos tendríamos que usar imagefilledrectangle algo así

Código PHP:

<?php
header("Content-type:  image/png");
$alto = 150;
$ancho = 150;
$im = imagecreatetruecolor($ancho,$alto);
$white = imagecolorallocate($im, 255,255,255);
imagefill($im,0,0,$white);
for ($i  = 0 ; $i < $ancho ; $i ++){
/*
int  imagefilledrectangle ( int im, int x1, int y1, int x2, int y2,  int col) 
*/ 
imagefilledrectangle ($im, rand(0,$ancho-50) ,rand(0,$ancho-50) , rand(30,$ancho) ,rand(30,$ancho), imagecolorallocatealpha($im, 255 - $r, 255 - $g, 255 -$b,90));
if($i % 2 == 0) $r  += 3;
if($i % 3 == 0)  $g += 2;
if($b < 255) $b += 1;
} 
imagepng ($im);
imagedestroy($im);
?> 

--Nefertiter 18 Mar 2005

Este artículo es parte de las FAQs de PHP y el Manual de PHP.

Herramientas personales