Dibujando puntos al azar con Canvas

En este artículo practicaremos un poco más con el uso del Canvas en HTML5, básicamente dibujaremos un montón de esferas cuyas posiciones son al azar (random). Si no sabes como comenzar con esto del Canvas en HTML5 puedes leer el artículo anterior en el cual damos los primeros pasos con esta API: Uso básico del canvas.

Este ejercicio sigue siendo muy sencillo de realizar; pasaré por alto varias explicaciones sobre como dibujar con esta API porque esto ya fue tema de un artículo pasado del blog: Uso básico del canvas.

• Lo primero que debemos hacer es obtener una referencia al canvas con el cual deseamos trabajar: var myCanvas = document.getElementById("myCanvas");
• Ya referenciado el canvas, obtenemos las dimensiones del mismo y calculamos hasta donde podemos dibujar:

var width = myCanvas.width; var height = myCanvas.height; var maxWidth = width-radius; var maxHeight = height-radius;

Por último, dibujamos: 

var ctx=myCanvas.getContext("2d");
for(i=0; i<n; i++){ 

var centerX = Math.floor(Math.random() * maxWidth);
var centerY = Math.floor(Math.random() * maxHeight);

ctx.beginPath();
ctx.arc(centerX,centerY,radius,0,2*Math.PI);
ctx.fillStyle = "red"; // color de las estrellas
ctx.fill();
ctx.stroke();
}

• Empleamos el atributo fillStyle para seleccionar un color de relleno y la función fill() para indicar que la figura será relleno.
• Las líneas 5 y 6 calculan las posiciones aleatorias dentro de las dimensiones del Canvas en donde se dibujarán las esferas .

Ejemplo completo 1

Puedes probar el ejemplo completo dando click aquí.

Utilizando como base el ejemplo anterior, crearemos un nuevo ejemplo el cual permitirá modificar la cantidad de esferas, el radio y color de las esferas a través de unos inputs los cuales referenciamos y tomamos sus valores en el JavaScript:

var radius = document.getElementById("radio").value; 
var n = document.getElementById("n").value; 
var color = document.getElementById("color").value;

Además de lo anterior; la siguiente línea myCanvas.width = width; permite limpiar el canvas (el dibujo anterior).

Ejemplo completo 2

Puedes probar el ejemplo completo dando click aquí.