Tutorial HTML5 – Canvas

2 enero, 20115 octubre, 2021 Carlos Dk 6 comentarios canvas, html5, Programacion

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!