En este tutorial vamos a comenzar a trabajar con canvas. Haremos nuestros primeros dibujos y alguna animación para ir entrando en el maravilloso mundo del Canvas.
Índice de contenidos
- 1. Introducción
- 2. Entorno
- 3. Configuración
- 4. Primeros dibujos
- 5. Animaciones básicas
- 6. Conclusiones
- 7. Referencias
1. Introducción
Canvas (o lienzo, traducido al español), es un elemento añadido a HTML5 mediante el cual, se puede dibujar usando scripts (habitualmente JavaScript).
Fué introducido por Apple para Mac OS X Dashboard y después implementado en Safari y Google Chrome. No está soportado en navegadores antiguos, pero si funciona en la mayoría de versiones más recientes de los navegadores.
Canvas como tal, es solo un contendor de gráficos, un lienzo como su nombre indica, ya que la «magia» la haremos con JavaScript.
El verdadero potencial de Canvas reside en la capacidad para actualizar contenidos en tiempo real, lo cual unido a la posibilidad de responder a eventos de usuario, proporciona un abanico de posibilidades para crear herramientas o juegos.
2. Entorno
El tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 15′ (2 Ghz Intel Core I7, 8GB DDR3).
- Sistema Operativo: Mac OS Sierra 10.12.3
- Entorno: SublimeText
3. Configuración
Lo primero que tenemos que hacer, es «colocar» nuestro elemento canvas dentro del
en nuestro HTML.
<canvas id="lienzo" width="500" height="500"></canvas>
Si nos fijamos, con «width» y «height» podemos dar la anchura y altura que queramos. Ahora ya tenemos nuestro lienzo incrustado en el HTML, aunque solo es eso, un lienzo en blanco. Para poder dibujar en él lo llevamos a JavaScript con GetElementById. Antes de comenzar cualquier trazado hay que llamar a este metodo para que lo inicie:
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
}
window.addEventListener('load', iniciar, false);
Ya tenemos todo listo para empezar a dibujar…
4. Primeros dibujos
Vamos a comenzar con algo tan sencillo como dibujar una línea.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.moveTo(0,0);
lienzo.lineTo(500,500);
lienzo.stroke();
}
window.addEventListener('load', iniciar, false);
En nuestro navegador veríamos algo como esto:
Si nos fijamos, en el método moveTo() , le pasamos por parámetro la posición «x» y la posición «y» desde donde vamos a empezar a dibujar. Este método es como decirle a un bolígrafo, donde debe posicionarse para dibujar.
En el método lineTo() sin embargo, lo que le pasamos por parámetro, son la posición «x» y la posición «y» hasta
donde queremos que llege la línea que vamos a dibujar.
Finalmente con el método stroke() lo que hacemos es darle la orden para que empiece a dibujar
Ahora vamos a ver un ejemplo un poco más complicado:
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.moveTo(0,0);
lienzo.lineTo(500,500);
lienzo.lineTo(0,300);
lienzo.fill();
lienzo.closePath();
}
window.addEventListener('load', iniciar, false);
Ahora lo que hemos hecho simplemente es rellenar el espacio que hay entre las líneas que hemos dibujado con el método fill(). Hemos usado también los métodos beginPath() y closePath(). Con esto lo que hacemos es indicar que vamos a iniciar un trazo y cuando hemos finaizado, closePath sería como decirle al bolígrafo que levante la punta del papel antes de seguir o no dibujando. si no usamos estos métodos corremos el riesgo de querer seguir dibujando líneas con stroke() y al no haber cerrado el trazo, estas sigan rellenando lo que hay dentro por el método fill() anterior.
4.1. Colores y cuadrados
Ahora vamos a ver algunos ejemplos para dibujar formas cuadradas y rectángulares.
Vamos a empezar por un cuadrado sin relleno
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.strokeRect(100,100,120,120);
}
window.addEventListener('load', iniciar, false);
Con el método «strokeRect», lo que hacemos es dibujar el contorno de un cuadrado o un rectángulo, ya que lo que le pasamos por parámetro es: posición «x» y posición «y» donde vamos a empezar a dibujar, que es la esquina superior izquierda del cuadrado, los dos siguientes parámetros pertenecen a la longitud que tendrán las líneas del eje «x» y la longitud que tendrán las líneas del eje «y». De esta forma, si en lugar de pintar un cuadrado, quisiéramos pintar un rectángulo, bastaría con darle distinta longitud a las líneas de un eje.
En el caso de que quisiéramos pintar un cuadrado sólido, es decir, con relleno usaríamos el método «fillRect()» en lugar de «strokeRect()».
Ahora vamos a darle un poco de color al asunto.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.fillStyle="#ff0000";
lienzo.strokeStyle="#00ff00";
lienzo.strokeRect(0,0,120,120);
lienzo.fillRect(130,0,150,100);
lienzo.fillRect(50,130,100,100);
lienzo.clearRect(60,140,80,80);
}
window.addEventListener('load', iniciar, false);
En este caso, con el método «strokeStyle=»#00ff00″», indicamos que queremos pintar de verde, tanto las líneas que dibujemos, como las figuras en las que dibujemos solo el contorno, mientras que con «fillStyle=»#00ff00″» indicamos que queremos pintar de color rojo cualquier relleno que hagamos.
Con el método «clearRect()» lo que hacemos es dejar en blanco el área que indiquemos, de forma que en el ejemplo expuesto, dejamos en blanco el área de un rectángulo más pequeño dentro del rectángulo rojo más grande, creando un rectángulo con el contorno rojo ancho. Gracias a la combinación de «fill» y «clear», se pueden conseguir diferentes efectos en los dibujos.
4.2. Círculos y arcos
Realmente lo que dibujamos en canvas son arcos:
arc(x, y, radius, startAngle, endAngle, anticlockwise);
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.arc(300,300,100,0,Math.PI, true);
lienzo.stroke();
lienzo.closePath();
}
window.addEventListener('load', iniciar, false);
Paso a explicar los parámetros que recibe el método «arc()» que es el que define que vamos a dibujar un arco:
- (posX, posY) esto es donde se va a encontrar punto central del arco.
- (radius) esto es la longitud que tendrá el radio de nuestro arco
- (angle) esto indica desde que ángulo vamos a empezar a dibujar el arco
- (radians) indicamos el ángulo que tendrá nuestro arco, expresado en radianes
- (anticlockwise) si está en true, significa que vamos a dibujar el arco en sentido contrario a las agujas del reloj. Esto es opcional, si lo omitimos siempre estará en true
Para saber como indicar el ángulo que queremos en radianes sólo necesitamos hacer una pequeña ecuación
180 grados = π radianes
Para trabajar con grados:
(π/180)*grados
Por ejemplo, 90º:
(π/180)*90
Ahora ya, sabiendo esto, si lo que queremos es dibujar un círculo y ademas queremos rellenarlo, sería así:
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.fillStyle="#4F99FF";
lienzo.arc(300,300,100,0,Math.PI*2);
lienzo.fill();
lienzo.closePath();
}
window.addEventListener('load', iniciar, false);
Como podemos ver es bastante sencillo dibujar círculos. Ahora vamos a animar un poco la cosa.
5. Animaciones
Ahora que ya sabemos dibujar líneas, cuadros, círculos, etc... vamos a probar a animarlo un poco.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
setInterval(function(){
for (var i=300; i>70; i=i-25){
lienzo.arc(250,250,i,0,Math.PI,true);
if (i==250){
lienzo.fillStyle= "#AB10FF";
lienzo.fill();
}else if (i==225){
lienzo.fillStyle = "#171AFF";
lienzo.fill();
}else if (i==200){
lienzo.fillStyle = "#38F7FF";
lienzo.fill();
}else if (i==175){
lienzo.fillStyle = "#48FF27";
lienzo.fill();
}else if (i==150){
lienzo.fillStyle = "#FFF432";
lienzo.fill();
}else if (i==125){
lienzo.fillStyle = "#E89536";
lienzo.fill();
}else if (i==100){
lienzo.fillStyle = "#FF0000";
lienzo.fill();
}else if (i==75){
lienzo.fillStyle = "white";
lienzo.fill();
}
lienzo.closePath();
lienzo.beginPath();
lienzo.moveTo(250,250);
lienzo.closePath();
}
},1000);
setInterval(function(){
for (var i=300; i>70; i=i-25){
lienzo.arc(250,250,i,0,Math.PI, true);
if (i==250){
lienzo.fillStyle= "#FF0000";
lienzo.fill();
}else if (i==225){
lienzo.fillStyle = "#E89536";
lienzo.fill();
}else if (i==200){
lienzo.fillStyle = "#FFF432";
lienzo.fill();
}else if (i==175){
lienzo.fillStyle = "#48FF27";
lienzo.fill();
}else if (i==150){
lienzo.fillStyle = "#38F7FF";
lienzo.fill();
}else if (i==125){
lienzo.fillStyle = "#171AFF";
lienzo.fill();
}else if (i==100){
lienzo.fillStyle = "#AB10FF";
lienzo.fill();
}else if (i==75){
lienzo.fillStyle = "white";
lienzo.fill();
}
lienzo.closePath();
lienzo.beginPath();
lienzo.moveTo(250,250);
lienzo.closePath();
}
},2000);
}
window.addEventListener('load', iniciar, false);
Lo que hago aquí es dibujar un arco iris con un bucle for en el que vamos cambiando el radio del arco y rellenando de un color distinto el arco cada vez que cambiamos el radio, el último arco lo pintamos de blanco para conseguir el efecto de arco.
Con el método "setInterval()" dibujo un arco iris cada segundo, mientras que en el segundo método "setInterval()", lo que hago es dibujar un arco iris con los colores invertidos cada dos segundos. De esta forma conseguimos una animación. Aunque no funciona igual en todos los navegadores, donde mejor se puede apreciar es en Chrome.
6. Conclusiones
Por supuesto, esto que hemos visto es muy básico y es solo la punta del iceberg de una herramienta que nos dá muchas posibilidades a la hora de crear juegos o herramientas en web.
Espero que haya servido por lo menos para empezar a entender un poco como funciona este elemento
me sirvio bastante…