Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas básico

Crea tus propios dibujos y animaciones con Canvas en HTML5


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





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

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Canvas básico (I)

Primer dibujo con canvas

imagen canvas
Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 84

Visitas el mes pasado: 174

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 mediante 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, Internet Explorer lo incorpora en su versión 9, Para versiones anteriores necesitamos una libreria (llamada FlashCanvas), explicaremos esto 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 actualiza tu navegador.
</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; los otros dos parámetros son la longitud y la altura del rectángulo.

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, Opera ó IE9.
</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







Canvas (básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com