DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
11-04-2014

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.

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í.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Metaballs con JavaScript

Metaballs con JavaScript

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Algunos artículos que te pueden interesar

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

En este artículo veremos como obtener los tres canales RGB de una imagen y operarlos por separados.

Andrés Cruz 15-05-2014

Secciones editables en el HTML con el atributo contenteditable

Secciones editables en el HTML con el atributo contenteditable

El atributo contenteditable es aplicable a cualquier elemento y permite establecer que un elemento sea editable; además se ejemplifica su uso y veremos los eventos.

Andrés Cruz 22-02-2016

¿Cómo obtener la resolución de pantalla con JavaScript?

¿Cómo obtener la resolución de pantalla con JavaScript?

En esta entrada veremos como obtener la resolución de una pantalla con JavaScript nativo.

Andrés Cruz 04-08-2014