Introducción a Canvas HTML5, Crear Cuadrado y mas
Canvas es un componente en HTML que nos permite crear gráficos y animaciones, en un principio creado para sustituir Adobe Flash, las posibilidades de canvas son Ilimitadas.
Usando canvas podemos hacer muchas cosas con gráficos:
- Crear puntos y lineas
- Crear cuadros y rectángulos
- Crear Círculos y Óvalos
- Agregar Imágenes
- Crear animaciones
- Crear degradados
- Muchas cosas mas
Los resultados pueden ser:
- Imágenes
- Animaciones
- Videojuegos
Crear un cuadrado
Vamos a ver un ejemplo de como crear un cuadro de 100 pixeles.
Lo primero que hacemos es crear el elemento canvas
[code language=”html”]<canvas id="mycanvas" width="300" height="300"></canvas>
[/code]Es muy importante agregar un id, width y height al elemento.
El elemento canvas solo sirve como contenedor, el resto del código para crear gráficos se hace con javascript.
[code language=”javascript”]var canvas = document.getElementById(‘mycanvas’); // seleccionamos el elemento canvas
var ctx = canvas.getContext(‘2d’); // seleccionamos el contexto 2d a partir del elemento
ctx.fillStyle = ‘blue’; // el color de relleno del cuadro, azul, se pueden usar colores en ingles, en formato hexadecimal, en rgb y rgba
ctx.fillRect(10, 10, 100, 100); // el orden de los parámetros son: posición x, posición y ancho y alto
En este caso creamos un cuadro de 100×100 y en la posición x=10 y y=10, las posiciones en canvas se usan de la siguiente manera.
Como podemos ver las posiciones empiezan desde arriba a abajo y de izquierda a derecha.
Es posible crear tantos cuadrados como queramos, podemos usar ciclos, funciones, etc.
Librerías que usan canvas
Canvas es una herramienta muy potente y ha sido la base para muchos plugins basados en html5 por ejemplo:
- Paper.js
- Raphael.js
- D3.js
- Chart.js
- Morris.js
- Phaser
- PixiJS
- Cocos2d js
- PlayCanvas
- Entre otras