Dibujar una Línea en Loop (ciclo) con HTML5 Canvas

24-07-2014 - Andrés Cruz

Dibujar una Línea en Loop (ciclo) con HTML5 Canvas In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

Ver demo Descargar Fuente

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);
  • X: La coordenada X de la esquina superior izquierda del rectángulo.
  • Y: La coordenada Y de la esquina superior izquierda del rectángulo.
  • Width: Ancho del rectángulo en pixeles.
  • Height: Largo del rectángulo en pixeles.

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);
}

Ver demo Descargar Fuente

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:

Ver demo Descargar Fuente


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!