tutorial canvas

HTML5 como dibujar un cuadrado con fillRect y CANVAS

Por si no sabian que es canvas es un elemento HTML incorporado en HTML5 que permite generar gráficos estáticos y animaciones.
Osea, es una etiqueta html donde podemos hacer dibujos y animaciones

La sintáxis de canvas es

<canvas id=«identificador» width=«600» height=«600»> </canvas>

Donde width=«600» height=«600» definen el área de trabajo donde se podrá dibujar e id=»identificador» es el atributo que nos servirá como referencia al momento de dibujar sobre <canvas>.

En está ocación les mostraré como hacer un cuadrado dentro del elemento <canvas>

  • PASO 1 Configurar el doctype de la página y  escribir  etiqueta <canvas> con sus respectivos atributos
    <!DOCTYPE html>  (ESTO VA EN LA PRIMERA LINEA DE CÓDIGO)
    <canvas id=»identificador» width=»600″ height=»600″> </canvas>  (Dentro del <body>)
  • Paso 2.- Crear función JAVASCRIPT  que dibuje sobre canvas

function dibujar_cuadro()
{
var lienzo = document.getElementById(«lienzo»);
var trabajo = lienzo.getContext(«2d»); //Siempre requerida
trabajo.fillStyle=»#ccc»;
trabajo.fillRect(150,150,300,300);
} 

  • Paso 3.- Agregar función al onload, para que sea ejecutada al abrir la página
<body onload=«dibujar_cuadro();»> 

Explicación de la función


* En la primera línea de nuestra función var lienzo = document.getElementById(«lienzo»); estamos almacenando en una variable al elemento <canvas> para poder trabajar con el.
* En la segunda línea  var trabajo = lienzo.getContext(«2d»); crea una variable llamada trabajo la cual tendrá los métodos para dibujar líneas, cuadros, círculos y más…
* La tercera trabajo.fillStyle=«#ccc«; está indicando que el color del relleno será «#ccc» mas o menos gris.
* La cuarta y última línea trabajo.fillRect(150,150,300,200); Está indicando el tamaño y la posición del cuadrado dentro de la etiqueta <canvas>
la función fillRect dibuja un cuadrado relleno con el color especificado en fillStyle y utiliza la siguiente sintáxis:

 fillRect(Espaciado a la izquierda , Espaciado superior, Ancho del rectangulo, Alto del rectangulo);

El código final quedará asi!
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title> Como dibujar un cuadrado con fillRect y CANVAS </title>
<script>
function dibujar_cuadro()
{
var lienzo = document.getElementById(«lienzo»);
var trabajo = lienzo.getContext(«2d»); //Siempre requerida
trabajo.fillStyle=«#ccc»;
trabajo.fillRect(150,150,300,200);
}
</script>
</head>
<body onload=»dibujar_cuadro();«>
<canvas id=»lienzo» style=«border:1px #D5D5D5 solid;» width=»600» height=»600«></canvas>
</body>
</html> 

Para mas información visitar: http://www.w3schools.com/html5/html5_ref_canvas.asp