Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de Canvas del HTML 5
Desarrollo Web
Tutorial de Canvas
mozilla.org
HTML5
htmlya
Empezando a dibujar en Canvas html 5 tutorial
taringa.net
Curva de Bézier
Wikipedia
flashcanvas
code.google.com
HTML5 Canvas tutorial
w3scool
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard

Canvas básico I

Primer dibujo con canvas

Qué es canvas

Canvas podríamos traducirlo al español como "lienzo", y eso es lo que es, un espacio en la página en el que podemos dibujar como en un lienzo.

Con el elemento canvas especificamos un área dentro de la página en la que podemos dibujar, poner imágenes, etc, todo ello mediantes scripts (necesitaremos saber javascript), los resultados pueden ser parecidos a utilizar flash, con la ventaja de que no necesitamos utilizar plugins externos.

Canvas está ya disponible directamente en todos los navegadores, excepto Internet Explorer, sin embargo mediante una libreria (llamada FlashCanvas) podemos hacer que éste también se vea en Internet Explorer, tal como explicaremos más adelante.

Por tanto, el elemento canvas es ya a día de hoy una alternativa a tener en cuenta para el diseño de páginas dinámicas, ya que no sólo permite los dibujos o imágenes estáticos, sino que podemos darles movimiento mediante acciones de javascript.

Codigo HTML para canvas

En el ejemplo que utilizaremos para explicar el funcionamiento de canvas dibujaremos un rectángulo

Empezamos por poner en la página el código HTML que indica en qué lugar de la página estará el dibujo, y el tamaño de éste. Para ello utilizaremos un código como en el siguiente ejemplo:

<canvas id="micanvas" width="200" height="150">
Si ves este texto es que tu navegador no admite canvas; por favor cambia a 
Firefox, Chrome, Safari o Opera.
</canvas>

El código consiste en una nueva etiqueta que crea un área dentro de la página. La etiqueta canvas deberá llevar como mínimo los atributos id, width y height

El atributo id permite identificarla para trabajar con ella en javascript; mientras que los atributos width y heigth indicarán el tamaño del área del lienzo.

Código javascript

El código javascript debe reconocer la etiqueta canvas por lo que debe cargarse después que ésta. Lo insertaremos después de esta etiqueta o mediante la funcion window.onload=function() { ... }.

Lo primero que haremos será buscar en el DOM la etiqueta canvas para obtener el elemento de la página.

var lienzo=document.getElementById("micanvas");

Usamos luego una función de canvas para acceder al contexto "2d", lo cual es necesario para dibujar:

var contexto = lienzo.getContext('2d');

Una vez que hemos accedido al contexto de canvas éste tiene diversas funciones que permiten dibujar en dos dimensiones. Utilizamos aquí una función para pintar un rectángulo.

contexto.fillRect(10,10,160,110);

Aunque nos ocuparemos más adelante de este tipo de funciones, decir aquí que la función fillRect() pinta un rectángulo en el que las coordenadas de la esquina superior izquierda están indicadas en los dos primeros parámetros, y la esquina inferior derecha por los otros dos.

Recordemos que el código javascript anterior debe ir dentro de la función windows.onload = function() en caso de que lo escribamos antes de la etiqueta canvas.

Código completo de la página

En este sencillo ejemplo ya tenemos todo lo necesario para hacer nuestro primer dibujo con canvas. Insertamos los códigos anteriores en una página:

<!DOCTYPE HTML>
<html>
<head>
<title>Primer canvas</title>
<script type="text/javascript">
window.onload = function() {
var lienzo=document.getElementById("micanvas");
var contexto = lienzo.getContext('2d');
contexto.fillRect(10,10,160,110);
}
</script>
</head>
<body>
<h1>Primer dibujo con canvas</h1>
<canvas id="micanvas" width="200" height="150">
  Si ves este texto es que tu navegador no admite canvas; por favor cambia a 
  Firefox, Chrome, Safari o Opera.
</canvas>
</body>
</html>

Y la página nos quedará como la del siguiente enlace:

Mi primer canvas

Hemos creado nuestro primer dibujo con canvas. Sin embargo canvas admite muchas más posibilidades que crear rectángulos. en las siguientes páginas veremos cómo crear otro tipo de figuras, poder añadir imágenes o texto en canvas, etc.






Al iniciar canvas en javascript. hay siempre un código que se repite de forma muy similar, por lo tanto en la siguiente página veremos cómo crear una función para iniciar canvas.

Función para iniciar canvas



Manual Canvas Básico

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo