Dibujar un stick man o figura de palo con Canvas HTML5

 in HTML5 by

Una figura de palos o garabatos es un dibujo muy simple de una persona o animal, en este caso es una persona y usaremos Canvas HTML5.

El dibujo de una persona que haremos consta de un circulo para la cabeza y lineas para brazos y piernas.

Codigo

Como siempre, primero les muestro el codigo que utilizo, todo el código va en el cuerpo o body del documento HTML.

Parte 1. Elemento canvas. Es un elemento canvas básico con un borde y medidas 960×540.

<canvas id="mycanvas" width="960" height="540" style="border: 1px black solid; "></canvas>

Parte 2. Script para crear el stick man. El código javascript para dibujar dentro de el elemento canvas, con algunos comentarios para facilitar la comprensión.

var canvas = document.getElementById('mycanvas'); // seleccionamos el elemento canvas
var ctx = canvas.getContext('2d'); // seleccionamos el contexto 2d a partir del elemento

ctx.lineWidth = 8; // Grosor de la linea

var startx = 480; // Posicion X
var starty = 200; // Posicion Y
ctx.strokeStyle = 'blue'; // el color de la linea, azul, se pueden usar colores en ingles, en formato hexadecimal, en rgb y rgba
ctx.beginPath();
ctx.arc(startx, starty, 20, 0, 2 * Math.PI); // Creamos un circulo para la cabeza. el orden de los parámetros son: posición x, posición y ancho y alto
ctx.stroke();

ctx.beginPath(); // Cuerpo
ctx.moveTo(startx, starty+20);
ctx.lineTo(startx, starty+100);
ctx.stroke();

ctx.beginPath(); // Dibujar mano izq
ctx.moveTo(startx, starty+25);
ctx.lineTo(startx-30, starty+60);
ctx.stroke();

ctx.beginPath(); // Dibujar mano der
ctx.moveTo(startx, starty+25);
ctx.lineTo(startx+30, starty+60);
ctx.stroke();

ctx.beginPath(); // Pie Izq
ctx.moveTo(startx, starty+100);
ctx.lineTo(startx-30, starty+150);
ctx.stroke();

ctx.beginPath(); // Pie der
ctx.moveTo(startx, starty+100);
ctx.lineTo(startx+30, starty+150);
ctx.stroke();

Ahora ya esta terminado el código, ahora vamos a ver el resultado.

Resultado

El resultado es una figura de una persona hecha con palos o garabatos.

A ustedes que les parece este ejemplo, quieren mas ejemplos de dibijos en canvas ?

Leave a comment