Más círculos de colores

A continuación dibujaremos en el <canvas> el mismo patrón geométrico, al estilo retro de antes, con la única diferencia que esta vez daremos al usuario la oportunidad de escoger entre varios juegos de colores.

El HTML

En el HTML incluiremos después del <canvas> un formulario <form> con un <select> con el id="colorSelect", que nos permite escoger la gama de colores. Tambien hay un <button> con el id="boton". Al hacer clic en el botón, este llamará la función manejadorFunciones().

La función manejadorFunciones()

Llama la función limpiarCanvas(), que hace exactamente esto: limpia el <canvas> de lo que hayamos dibujado anteriormente. Escribiremos esta función más adelante.
Decide la gama de colores utilizada (de hecho decide el sub-array del array colores) en función de la <option> seleccionada en el <select id="colorSelect">.
Elige como color de fondo el último color de la gama elegida.
Por fin llama 50 veces la función que construye los círculos concéntricos (la función circulosConcentricos() que escribiremos más adelante).


function manejadorFunciones(colores) {
  // limpia el canvas
  limpiarCanvas(ctx);

  // decide los colores:  menta con chocolate, frambuesa o moras
  var oSelect = document.getElementById('colorSelect');
  var index = oSelect.selectedIndex;
  var coloresRy = colores[index];

  // elige el color de fondo
  ctx.fillStyle = coloresRy[coloresRy.length - 1];
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // llama 50 veces la función circulosConcentricos
  for (var i = 0; i < 50; i++) {
    circulosConcentricos(coloresRy);
  }
}

La función circulosConcentricos()

Escoge al azar las coordenadas del centro de cada circulo.
Define el array de los radios de los círculos concentricos y calcula los radios de cada círculo.
Dibuja 5 circulos concentricos de colores escogidos al azar.


function circulosConcentricos(coloresRy) {console.log(coloresRy) 
  // escoge al azar las coordenadas del centro de cada grupo
  var x = Math.floor(Math.random() * canvas.width);
  var y = Math.floor(Math.random() * canvas.height);
  // define el array de los radios de los circulos concentricos
  // por ahora está vacio
  var R = Array();
  // calcula el radio del grupo
  var r = Math.floor(Math.random() * 12);
  // dibuja 5 circulos concentricos
  for (var i = 0; i < 4; i++) {
	// calcula los radios de los circulos concentricos  
	var radio = r * (5-i); 
    // define el color de cada circulo
    var j = Math.floor(Math.random() * (coloresRy.length + 1));
    ctx.fillStyle = coloresRy[j];
    // dibuja el circulo	
    ctx.beginPath();
    ctx.arc(x, y, radio, 0, 2 * Math.PI);
    ctx.fill();
  }
}

La función limpiarCanvas()

La función limpiarCanvas() utiliza el método clearRect() bara borrar todo lo dibujado anteriormente en el <canvas>


function limpiarCanvas(canvas, ctx){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
}

Poniéndolo todo junto:

Si tenemos <canvas> y si este tiene contexto ( if(ctx) ) podemos iniciar el lienzo llamando la función manejadorFunciones(). Esto asegura que aparezca un dibujo en el <canvas> aunque no hemos hecho todavía clic en el #boton.
También activaremos el #boton por tal que este vuelva a llamar la función manejadorFunciones() si ocurre el evento onclick.


  // el array de las gamas de colores
var colores = [
  ['#588f71', '#d9c7ae', '#573a1e', '#755f49', '#0d0d0a'], // chocolate con menta
  ['#AC1848', '#BFB9A4', '#888B90', '#AAB2B7', '#131315'], // frambuesas
  ['#784A91', '#8D699E', '#B3ACAF', '#584792', '#9E8A46', '#351f41'] // moras
];

var canvas = document.getElementById('lienzo');
  if (canvas && canvas.getContext) {
    var ctx = canvas.getContext('2d');
    if (ctx) {
      //iniciar canvas
      manejadorFunciones(colores);
      var clickButton = document.getElementById('boton')
      clickButton.onclick = function() {
        manejadorFunciones(colores);
      }
    }
  }

function manejadorFunciones(colores) {
  // limpia el canvas
  limpiarCanvas(ctx);

  // decide los colores:  menta con chocolate, frambuesa o moras
  var oSelect = document.getElementById('colorSelect');
  var index = oSelect.selectedIndex;
  var coloresRy = colores[index];

  // elige el color de fondo
  ctx.fillStyle = coloresRy[coloresRy.length - 1];
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // llama 50 veces la función circulosConcentricos
  for (var i = 0; i < 50; i++) {
    circulosConcentricos(coloresRy);
  }
}

function circulosConcentricos(coloresRy) {console.log(coloresRy) 
  // escoge al azar las coordenadas del centro de cada grupo
  var x = Math.floor(Math.random() * canvas.width);
  var y = Math.floor(Math.random() * canvas.height);
  // define el array de los radios de los circulos concentricos
  // por ahora está vacio
  var R = Array();
  // calcula el radio del grupo
  var r = Math.floor(Math.random() * 12);
  // dibuja 5 circulos concentricos
  for (var i = 0; i < 4; i++) {
	// calcula los radios de los circulos concentricos  
	var radio = r * (5-i); 
    // define el color de cada circulo
    var j = Math.floor(Math.random() * (coloresRy.length + 1));
    ctx.fillStyle = coloresRy[j];
    // dibuja el circulo	
    ctx.beginPath();
    ctx.arc(x, y, radio, 0, 2 * Math.PI);
    ctx.fill();
  }
}

function limpiarCanvas(ctx) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

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.

w3.unpo<code>todo