Tutorial HTML5 – Canvas
Bienvenidos a VerTutoriales.com, como dijimos hace algún tiempo, por fín vamos a comenzar con el más que esperado curso de HTML5, este curso será una colaboración en conjunto con foroHTML5, y servirá como comienzo para un proyecto mayor.
Así que iremos poco a poco realizando pequeños desarrollos totalmente funcionales por si mismos, pero que se irán incorporando a un proyecto más grande del cual toda la comunidad podrá beneficiarse. Así que eres libre de compartir tambien!
Sin más preambulos, vamos a comenzar con el curso de HTML5.
1. Elemento Canvas
El primer componente que vamos a ver va a ser el Canvas, que iremos tocando en más de una ocasión debido a su extensión y extraordinaria potencia. Este objeto sirve para dibujar dinámicamente imagenes en nuestra web.
Para declarar este elemento, usaremos:
<canvas id=”tutorial-canvas” width=”100″ height=”100″>
Este texto será el que muestre el navegador no compatible.
<br>
Por favor, actualiza a una versión que soporte HTML5.
</canvas>
Nos encontramos con 3 parámetros dentro del objeto canvas: id, para nombrar nuestro canvas, width para designar el ancho y height para definir el alto. Además se pueden añadir más parámetros, pero al ser opcionales iremos complicandolo poco a poco más adelante.
Con esto ya tendriamos definido un elemento canvas, pero vamos a realizar un pequeño ejemplo, pintando con javascript. Veamos:
//cargamos el elemento canvas
var canvas = document.getElementById(‘tutorial-canvas’);//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
var contexto = canvas.getContext(‘2d’);//Ya que tenemos el contexto del canvas cargado, lo utilizo para dibujar
contexto.fillRect(20, 0, 20, 150);
Voy a resumirlo por encima, hemos declarado un canvas de x dimensiones, luego en un código js, hemos cargado el canvas, le hemos dado un contexto de trabajo (2d) y por último hemos utilizado una función del contexto para pintar unas lineas. fillRect, recibe la posición en x, y, el ancho y el alto del rectangulo respectivamente, así que podeis situarlo y darle las dimensiones que querais.
Os dejo el ejemplo completo para que lo probeis, solo copiar y pegar 🙂
<html>
<head>
<title>Tutorial de HTML5 – Elemento Canvas</title>
<script>
window.onload = function(){
//cargamos el elemento canvas
var canvas = document.getElementById(‘tutorial-canvas’);//una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
var contexto = canvas.getContext(‘2d’);//Ya que tenemos el contexto del canvas cargado, lo utilizo para dibujar
contexto.fillRect(20, 0, 20, 150);}
</script>
</head><body>
<canvas id=”tutorial-canvas” width=”100″ height=”100″>
Este texto será el que muestre el navegador no compatible.
<br>
Por favor, actualiza a una versión que soporte HTML5.
</canvas></body>
</html>
(window.onload es usado para que lance la función a la carga de la página.)
Bueno, pues por hoy listo, iremos avanzando en este nuevo lenguaje poco a poco. Si teneis dudas podeis dejar comentarios en este artículo o escribirla en forohtml5.com.
Espero veros por aquí!
Un saludo!
Comments
Voy a probarlo
¿Qué editor de texto me descargo?
Te aconsejaría Notepad++, pero cualquier editor vale.