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
