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”&gt;
<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

Anuncios

7 comentarios en “HTML5 como dibujar un cuadrado con fillRect y CANVAS

  1. jose dijo:

    hola que tal queria ver si me podias ayudar con una consulta, si puedes te mando mi correo es sobre un grafico de pastel con canvas. gracias por el aporte

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s