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

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Calendario de cubo

Calendario de cubo

Flat Module con puro CSS

Flat Module con puro CSS

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

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

El elemento Progress Bar HTML5

El elemento Progress Bar HTML5

La función del elemento o etiqueta (tag) progress es la de indicar el estado de terminación de una tarea.

Andrés Cruz 30-12-2013