Círculos de colores
A continuación dibujamos en el <canvas>
un patrón geométrico, al estilo retro.
Para ser más exactos serán 50 grupos de círculos concéntricos cuyos posición dimensiones y colores serán decididas al azar.
Más información acerca de como dibujar un círculo.
// el array de los colores utilizados
var coloresRy = new Array('#3D0726', '#6E5813', '#F39523', '#F5681C', '#F33C2F');
// el canvas
var canvas = document.getElementById('lienzo');
if (canvas && canvas.getContext) {
var ctx = canvas.getContext('2d');
if (ctx) {
// elige el color de fondo
ctx.fillStyle = '#888800';
// y rellena un rectángulo del tamaño del canvas con este color
ctx.fillRect(0, 0, canvas.width, canvas.height);
// construye 50 grupos de círculos concéntricos
for (var index = 0; index < 50; index++) {
// escoge al azar las coordenadas del centro del grupo
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
//define el radio del grupo
var r = Math.floor(Math.random() * 15);
// construie 5 circulos concentricos
for (var i = 0; i <= 4; i++) {
//define los radios de los circulos concentricos
//el más grande al inicio, el más pequeño al final
var radio = r*(5-i);
// escoge aleatoriamente el color de cada circulo
var j = Math.floor(Math.random() * (coloresRy.length + 1));
// y lo dibuja
ctx.beginPath();
ctx.fillStyle = coloresRy[j];
ctx.arc(x, y, radio, 0, 2 * Math.PI);
ctx.fill();
}
}
}
}
La imagen cambiará cada vez que actualice la página. Para recuperar la imagen utilice toDataURL
var url = canvas.toDataURL();
Nota: Firefox nos permite abrir y guardar la imagen generada haciendo clic con el botón derecho del ratón, y escogiendo la opción deseada.