DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
24-07-2014

En este artículo veremos cómo dibujar una línea en un Loop o ciclo en HTML5; específicamente, con la API de Canvas; aunque ya la API de Canvas ofrece primitivas para dibujar una línea (lineTo()), en este ejercicio pintaremos una línea a partir de cuadrados; de tamaños variables, los cuales serán los "pixeles" que conforman a nuestra línea; para dibujar un cuadrado emplearemos la siguiente función:

ctx.fillRect(X,Y,Width,Height);

Dibujando la línea con la API de Canvas

Definimos el tamaño del Canvas en pixeles; el Canvas va a ser un cuadrado:

var tamCanvas = 360;

Lo siguiente es definir de cuantos "pixeles" va a constar la línea y el tamaño de los mismos:

var numCuadrados = 10;
var tam = 100;

Ahora falta definir el espaciado entre las "píxeles"; el cual será menor a medida de que aumentemos el número de rectángulos:

var espaciado = (tamCanvas-tam)/(numCuadrados-1);

Ahora realizamos un ciclo en donde dibujaremos los "pixeles" que conformarán la línea:

for(var i=0; i <numCuadrados; i++){
    ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; 
    ctx.fillRect(i*espaciado, i*espaciado, tam, tam);
}

Resultado Final

Ejemplo interactivo

Si te han quedado dudas del funcionamiento de los parámetros anteriores, en este ejemplo podrás variar el valor de cada parámetro:

Resultado Final


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Algunos artículos que te pueden interesar

Gradientes SVG en HTML

Gradientes SVG en HTML

En esta entrada veremos cómo definir y aplicar gradientes a cualquier SVG creado a partir de HTML; hay dos tipos de gradientes SVG que podemos emplear en nuestros diseños: lineal y radial.

Andrés Cruz 18-05-2015

Nuevos campos de formularios en HTML5 (Guía rápida)

Nuevos campos de formularios en HTML5 (Guía rápida)

En este artículo trataré de mostrarles los nuevos campos que nos trae el HTML5; como veremos son muchos "type" específicos para cada tipo de campo; pasando por varios formatos de fechas hasta llegar a otros como email, url, rangos entre otros.

Andrés Cruz 18-07-2013

¿Cómo crear un efecto de onda con Canvas y JavaScript?

¿Cómo crear un efecto de onda con Canvas y JavaScript?

En esta entrada veremos un experimento que simula una oda empleando el elemento Canvas y JavaScript.

Andrés Cruz 02-11-2015