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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
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
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Canvas básico (I)
Primer dibujo con canvas
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 50
Visitas el mes pasado: 112
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:
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.
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com