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

Calendario de cubo

Calendario de cubo

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Flat Module con puro CSS

Flat Module con puro CSS

Algunos artículos que te pueden interesar

Usando la API de Visibilidad de Página  en JavaScript

Usando la API de Visibilidad de Página en JavaScript

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios.

Andrés Cruz 09-03-2015

La API Vibration (Vibración) en HTML5

La API Vibration (Vibración) en HTML5

El método vibrate del objeto navigator permite activar la vibración por hardware de un dispositivo mediante JavaScript.

Andrés Cruz 04-02-2014

El Drag and Drop en HTML5 (JavaScript)

El Drag and Drop en HTML5 (JavaScript)

Drag and Drop (Arrastrar y Soltar) es una característica que permite "agarrar" un objeto, arrastrarlo y soltarlo en una diferente localización. En en esta entrada hablaremos sobre el Drag and Drop en HTML5, ejemplos, métodos y atributos.

Andrés Cruz 04-01-2016