Tutorial de Canvas (HTML5)
Canvas es un nuevo elemento en HTML, por tanto tendrás que tener un navegador moderno y actualizado, por ejemplo Firefox. Internet Explorer 8 y versiones antiguas, no la soportan. Canvas que en español es Lienzo es una area rectangular usada para contener gráficos, estos se crean mediante scripts (por lo general con JavaScript). Se pueden tener varios elementos Canvas en una página HTML.
Para crear un elemento Canvas se utiliza la siguiente sintaxis:
Siempre se da un identificador único para el elemento cómo tambien un ancho y un alto. En el medio se coloca un mensaje al usuario que aparece si utiliza un navegador antiguo.
Por defecto un Canvas no tiene borde pero se le puede agregar con estilo CSS:
Dibujar un rectangulo:
El siguiente código dibuja un rectángulo azul:
< !DOCTYPE html>
< html>
< body>
< canvas id="miLienzo" width="200" height="100" style="border:1px solid #c3c3c3;">
Tú navegador no soporta canvas
< /canvas>
< script>
var c=document.getElementById("miLienzo");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(10,10,180,80);
< /script>
< /body>
< /html>
Explicación:
Se crea un canvas con id miLienzo, un ancho igual a 200 y una altura igual a 100.
Con esta línea obtenemos el elemento con el que vamos a trabajar:
Luego llamamos al método getContext() y le pasamos como parámetro la cadena "2d". El objeto getContext("2d") es un objeto incorporado en HTML5 con muchas propiedades y métodos para dibujar circulos, cuadros, texto, imágenes y más.
Esta línea pinta el rectángulo de color azul:
Y esta otra dibuja el rectangulo:
El método fillRect(x,y,ancho,alto); recibe cuatro parámetros: los dos primeros son las coordenadas que ubican el rectangulo, las otras dos son el ancho y alto. Este método dibuja un rectangulo relleno (el color que específiquemos). La coordenada 0,0 está ubicada en la parte superior izquierda del canvas.
Con lo anterior obtenemos el siguiente resultado:
Una fantástica funcionalidad de Canvas es que si le das clic derecho sobre las figuras creadas puedes guardarlas en tu pc como una imagen.
La anterior figura se puede representar de la siguiente manera:
Dibujar una línea:
El siguiente código traza una línea horizontal en toda la mitad del canvas:
< !DOCTYPE html>
< html>
< body>
< canvas id="Canv" width="200" height="100" style="border:1px solid #d3d3d3;">
Tu navegador no soporta canvas
< /canvas>
< script>
var c=document.getElementById("Canv");
var ctx=c.getContext("2d");
ctx.moveTo(0,50);
ctx.lineTo(200,50);
ctx.stroke();
< /script>
< /body>
< /html>
Explicación:
Para trazar una línea se utilizan los métodos:
moveTo(x,y) Coordenada donde empieza la línea.
lineTo(x,y) Coordenada donde finaliza la línea.
stroke(); Dibuja la línea.
Obtenemos la referencia del canvas:
Obtenemos el contexto:
El punto inicial de la línea:
El punto final de la línea:
Dibuja la línea:
Resultado:
Coordenadas de la anterior figura:
Un pentagono dibujado con lineas:
Ubicar una imagen sobre el canvas:
Utilizamos el método:
drawImage(img) Este método puede recibir otros parámetros adicionales.
< !DOCTYPE html>
< html>
< body>
< p>Imagen a usar:</p>
< img border="0" height="150" width="150" src="html5.png" id="miImagen" />
< p>Canvas:</p>
< canvas id="miCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
Tú navegador no soporta canvas</canvas>
< script>
var c=document.getElementById("miCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("miImagen");
ctx.drawImage(img);
< /script>
< /body>
< /html>
Explicación:
Cargamos una imagen:
Creamos un canvas:
Obtenemos el canvas:
Obtenemos el contexto:
Obtenemos la imagen a través de su id:
Dibujamos la imagen:
El parámetro del método es la imagen.
Resultado:
Imagen a usar:
Canvas:
Dibujar texto:
Se utiliza uno de estos métodos:
fillText(texto,x,y) Dibuja un texto normal sobre el canvas
strokeText(texto,x,y) Dibuja un texto "sin relleno" sobre el canvas
< !DOCTYPE html>
< html>
< body>
< canvas id="lienzo" width="150" height="50" style="border:1px solid #d3d3d3;">
Tu navegador no soporta canvas</canvas>
< script>
var c=document.getElementById("lienzo");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Codigo Jerry",10,25);
< /script>
< /body>
< /html>
Explicación:
Definimos la fuente del texto con un ancho de 20px:
Dibuja el texto a partir de la coordenada (10,25):
Resultado:
Con el método strokeText() este sería el resultado:
Dibujar un círculo:
Utilizamos el método arc() para dibujar círculos o semicírculos:
arc(x,y,radio,anguloInicial,anguloFinal) Este método recibe cinco parámetros obligatorios y uno opcional. Los dos primeros son las coordenadas para ubicar el círculo, el tercero es el radio del circulo, y los dos ultimos son los ángulos en radianes.
La siguiente imagen explica lo que hacen los parámetros de la funcion arc() con estos valores:
X=100;
Y=74;
Radio=50;
Angulo inicial=0;
Angulo final=1.5*Pi
El siguiente código dibuja un circulo relleno de color azul:
< !DOCTYPE html>
< html>
< body>
< canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;">
Tu navegador no soporta canvas</canvas>
< script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle="blue";
ctx.fill();
< /script>
< /body>
< /html>
Resultado:
Nota: Si vas a dibujar un circulo completo, el ángulo final debe recibir este valor: 2*Math.PI.
Un completo tutorial (en inglés) del elemento canvas aquí.
Para crear un elemento Canvas se utiliza la siguiente sintaxis:
<canvas id="miCanvas" width="200" height="100">Tú navegador no soporta canvas</canvas>
Siempre se da un identificador único para el elemento cómo tambien un ancho y un alto. En el medio se coloca un mensaje al usuario que aparece si utiliza un navegador antiguo.
Por defecto un Canvas no tiene borde pero se le puede agregar con estilo CSS:
<canvas id="miCanvas" width="200" height="100" style="border:1px solid">Tú navegador no soporta canvas</canvas>
Dibujar un rectangulo:
El siguiente código dibuja un rectángulo azul:
< !DOCTYPE html>
< html>
< body>
< canvas id="miLienzo" width="200" height="100" style="border:1px solid #c3c3c3;">
Tú navegador no soporta canvas
< /canvas>
< script>
var c=document.getElementById("miLienzo");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(10,10,180,80);
< /script>
< /body>
< /html>
Explicación:
Se crea un canvas con id miLienzo, un ancho igual a 200 y una altura igual a 100.
Con esta línea obtenemos el elemento con el que vamos a trabajar:
var c=document.getElementById("miLienzo");
Luego llamamos al método getContext() y le pasamos como parámetro la cadena "2d". El objeto getContext("2d") es un objeto incorporado en HTML5 con muchas propiedades y métodos para dibujar circulos, cuadros, texto, imágenes y más.
Esta línea pinta el rectángulo de color azul:
ctx.fillStyle="#0000FF";
Y esta otra dibuja el rectangulo:
ctx.fillRect(10,10,180,80);
El método fillRect(x,y,ancho,alto); recibe cuatro parámetros: los dos primeros son las coordenadas que ubican el rectangulo, las otras dos son el ancho y alto. Este método dibuja un rectangulo relleno (el color que específiquemos). La coordenada 0,0 está ubicada en la parte superior izquierda del canvas.
Con lo anterior obtenemos el siguiente resultado:
Una fantástica funcionalidad de Canvas es que si le das clic derecho sobre las figuras creadas puedes guardarlas en tu pc como una imagen.
La anterior figura se puede representar de la siguiente manera:
Dibujar una línea:
El siguiente código traza una línea horizontal en toda la mitad del canvas:
< !DOCTYPE html>
< html>
< body>
< canvas id="Canv" width="200" height="100" style="border:1px solid #d3d3d3;">
Tu navegador no soporta canvas
< /canvas>
< script>
var c=document.getElementById("Canv");
var ctx=c.getContext("2d");
ctx.moveTo(0,50);
ctx.lineTo(200,50);
ctx.stroke();
< /script>
< /body>
< /html>
Explicación:
Para trazar una línea se utilizan los métodos:
moveTo(x,y) Coordenada donde empieza la línea.
lineTo(x,y) Coordenada donde finaliza la línea.
stroke(); Dibuja la línea.
Obtenemos la referencia del canvas:
var c=document.getElementById("Canv");
Obtenemos el contexto:
var ctx=c.getContext("2d");
El punto inicial de la línea:
ctx.moveTo(0,50);
El punto final de la línea:
ctx.lineTo(200,50);
Dibuja la línea:
ctx.stroke();
Resultado:
Coordenadas de la anterior figura:
Un pentagono dibujado con lineas:
Ubicar una imagen sobre el canvas:
Utilizamos el método:
drawImage(img) Este método puede recibir otros parámetros adicionales.
< !DOCTYPE html>
< html>
< body>
< p>Imagen a usar:</p>
< img border="0" height="150" width="150" src="html5.png" id="miImagen" />
< p>Canvas:</p>
< canvas id="miCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
Tú navegador no soporta canvas</canvas>
< script>
var c=document.getElementById("miCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("miImagen");
ctx.drawImage(img);
< /script>
< /body>
< /html>
Explicación:
Cargamos una imagen:
<img border="0" height="150" width="150" src="html5.png" id="miImagen" />
Creamos un canvas:
<canvas id="miCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
Tú navegador no soporta canvas</canvas>
Tú navegador no soporta canvas</canvas>
Obtenemos el canvas:
var c=document.getElementById("miCanvas");
Obtenemos el contexto:
var ctx=c.getContext("2d");
Obtenemos la imagen a través de su id:
var img=document.getElementById("miImagen");
Dibujamos la imagen:
ctx.drawImage(img);
El parámetro del método es la imagen.
Resultado:
Imagen a usar:
Canvas:
Dibujar texto:
Se utiliza uno de estos métodos:
fillText(texto,x,y) Dibuja un texto normal sobre el canvas
strokeText(texto,x,y) Dibuja un texto "sin relleno" sobre el canvas
< !DOCTYPE html>
< html>
< body>
< canvas id="lienzo" width="150" height="50" style="border:1px solid #d3d3d3;">
Tu navegador no soporta canvas</canvas>
< script>
var c=document.getElementById("lienzo");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Codigo Jerry",10,25);
< /script>
< /body>
< /html>
Explicación:
Definimos la fuente del texto con un ancho de 20px:
ctx.font="20px Georgia";
Dibuja el texto a partir de la coordenada (10,25):
ctx.fillText("Codigo Jerry",10,25);
Resultado:
Con el método strokeText() este sería el resultado:
Dibujar un círculo:
Utilizamos el método arc() para dibujar círculos o semicírculos:
arc(x,y,radio,anguloInicial,anguloFinal) Este método recibe cinco parámetros obligatorios y uno opcional. Los dos primeros son las coordenadas para ubicar el círculo, el tercero es el radio del circulo, y los dos ultimos son los ángulos en radianes.
La siguiente imagen explica lo que hacen los parámetros de la funcion arc() con estos valores:
X=100;
Y=74;
Radio=50;
Angulo inicial=0;
Angulo final=1.5*Pi
El siguiente código dibuja un circulo relleno de color azul:
< !DOCTYPE html>
< html>
< body>
< canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;">
Tu navegador no soporta canvas</canvas>
< script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle="blue";
ctx.fill();
< /script>
< /body>
< /html>
Resultado:
Nota: Si vas a dibujar un circulo completo, el ángulo final debe recibir este valor: 2*Math.PI.
Un completo tutorial (en inglés) del elemento canvas aquí.
No hay comentarios