Introducción canvas

Que es Canvas

(lienzo en inglés)

Es un elemento HTML  que permite la generación de gráficos dinámicamente por medio de un codigo JavaScript. Permite generar gráficos 2D, juegos, animaciones y composición de imágenes.

 

Colocar el elemento canvas

El lelemento se coloca dentro del cuerpo de la página haciendo uso de su etiqueta <CANVAS>. Esta etiqueta,  forma parte del estándar del HTML 5.

<html>
<head><title>Titulo</title>
</head>
<body>
<canvas id=”micanvas” width=”200″ height=”100″></canvas>
</body>
</html>

El elemento tiene apertura y cierre y entre medias podemos escribir un texto que será lo que vean los usuarios que entren con navegadores que no soporten la etiqueta CANVAS.

Para especificar las características de este canvas tenemos varios atributos:

Atributo id:
Para asignarle un nombre único y luego referirnos a este canvas desde Javascript.

Atributos width y height:
Para indicar la anchura y altura del área del canvas.

Inicialmente el canvas está en blanco y cuando queremos pintar sobre él tenemos que acceder al contexto de renderizado del canvas, sobre el que podremos invocar distintos métodos para acceder a las funciones de dibujo. El proceso simplificado sería el siguiente:

//Recibimos el elemento canvas

var canvas = document.getElementById(‘micanvas‘); //micanvas es el nombre asignado en el ID del canvas

//Accedo al contexto de ‘2d’ de este canvas, necesario para dibujar
var contexto = canvas.getContext(‘2d’);

//Dibujo en el contexto del canvas
contexto.fillRect(50, 0, 10, 150); //(Posición X, Posición Y, Ancho, Alto)

 

Para hacer uso de los metodos anteriores se necesita la utilización de la etiqueta:

Ejemplo Básico:

Titulo


var cv=document.getElementById(‘micanvas’);
var ctx=cv.getContext(‘2d’);
ctx.fillRect(0,0,150,100);

</body>
</html>

 

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

A %d blogueros les gusta esto: