Hola en este post veremos como usar la etiqueta <canvas></canvas> en HTML5.
En todo los casos se siguen los siguientes pasos:
1. Creamos la etiqueta canvas en html
En HTML usamos la etiqueta canvas y definimos su ancho y altura:
<canvas id="id_del_canvas" width="" heigth=""></canvas>
2. Dibujamos en el canvas con javascript
En JavaScript obtenemos el canvas y dibujamos:
var canvas = document.getElementById("id_del_canvas");
var dibujo = canvas.getContext("2d");
..... dibujamos con las funciones definidas para canvas
Vamos con los ejemplos:
// DIBUJAR RECTÁNGULOS
Vamos con los ejemplos:
// DIBUJAR RECTÁNGULOS
function dibujarRectangulo(){
var canvas = document.getElementById("el_canvas"); // declarmos el canvas
var dibujo = canvas.getContext("2d"); // se usará gráficos en dos dimensiones
dibujo.rect(10,10,20,20); // definimos el rectangulo
dibujo.fill(); // creamos o mostramos el rectángulo
}
- Para definir el rectángulo se
utilizan las coordenadas x (horizontal) e y (vertical), 10 píxeles y 10
píxeles, contados a partir del ángulo superior izquierdo del elemento
canvas, con un ancho de 200 píxeles y una altura de 100 píxeles (
dibujo.rect(10,10,200,100)).
-
La cuarta línea solicita que se cree o se muestre el rectángulo definido mediante:
dibujo.fill().
- Aunque, también se podría haber usado el método
fillRect()para definir y dibujar el rectángulo en una sola sentencia.
// DIBUJAR CÍRCULOS
function dibujarCirculo(){
var canvas = document.getElementById("el_canvas");
var dibujo = canvas.getContext("2d");
dibujo.fillStyle="rgb(0,255,127)";
dibujo.arc(50,50,40,0,2*Math.PI,true);
dibujo.fill();
}
Para dibujar un arco o un círculo en la posición (x,y), se utiliza la función
arc(x, y, radio, ángulo inicio, ángulo final, dirección) donde sus parámetros son:-
x: coordenada horizontal calculada a partir del centro del óvalo.
-
y: coordenada vertical calculada a partir del centro del óvalo.
-
radio: radio del óvalo.
-
ángulo inicio: punto de partida del arco en radianes.
- ángulo final: punto de llegada del arco en radianes.
- direccción: alor boleano que indica que el arco será dibujado en el sentido de las agujas del reloj (valor true) o al contrario (valor false).
// DIBUJAR TRAZADOS
function dibujarTrazados(){
var canvas_trazado = document.getElementById("canvas_trazado");
var dibujo = canvas_trazado.getContext("2d");
dibujo.beginPath(); // Inicio el trazado
dibujo.moveTo(150,50); // Coordenadas de inicio
dibujo.lineTo(200,120); // Dibuja una línea desde el punto
// anterior hasta el punto 200,120
dibujo.lineTo(90,120); // Crea una línea hasta las nuevas coordenadas
dibujo.closePath(); // Cierra el trazo.
dibujo.stroke(); // Dibuja el contorno del trazado definido
}
- beginPath(): esta función le indica al contexto del canvas que se va a comenzar a dibujar un camino. No tiene ningún parámetro y por sí sola no hace ninguna acción visible. Se invoca en primer lugar, antes de comenzar a dibujar el camino o trazado incorporando segmentos.
- moveTo(x,y): esta función mueve el puntero imaginario a una posición específica donde comenzar o continuar el trazado. En realidad, no dibuja nada en sí, pero permite definir el primer punto del camino.
- closePath(): esta función sirve para cerrar un trazado o camino a su punto inicial, dibujando una línea recta desde el último punto hasta el punto de partida (definido con moveTo()). Tampoco recibe ningún parámetro.
- stroke(): esta función dibuja el contorno de un trazado a diferencia de fill() que rellena de color el trazado.
- fill(): Este método dibuja el trazado como una figura sólida. Cuando se usa este método no es necesario cerrar el trazado con closePath(), el trazado es automáticamente cerrado con una línea recta trazada desde el punto final hasta el origen.
- lineTo(x,y): esta función dibuja una línea recta, desde la posición actual del puntero de dibujo, hasta el punto (x,y) que se indique como parámetro.
// DIBUJAR COLORES Y SOMBRAS
function dibujarColoresSombras(){
var canvas_sombras=document.getElementById('colores_sombras');
var dibujo=canvas_sombras.getContext('2d');
dibujo.fillStyle="#2E64FE";
dibujo.shadowBlur=40;
dibujo.shadowColor="black";
dibujo.shadowOffsetX=20;
dibujo.shadowOffsetY=10;
dibujo.arc(50,50,40,0,2*Math.PI,true); // Crea una línea hasta las nuevas coordenadas
dibujo.fill(); // Cierro el trazado y relleno la figura
}
-
Existe un atributo del contexto del canvas que permite cambiar el color de relleno:
fillStyle()
dibujo.fillStyle="#000099";- El atributo
strokeStyle()funciona de la misma forma que fillStyle con la diferencia que permite definir el trazado del dibujo.
dibujo.strokeStyle="#000099";-
shadowBlur: para definir el difuminado de la sombra.
-
shadowColor: para definir el color.
-
shadowOffsetX: para definir la distancia horizontal (si no se indica nada, la sombra aparecerá alrededor del dibujo).
-
shadowOffsetY: para definir la distancia vertical (si no se indica nada, la sombra aparecerá alrededor del dibujo).
// DIBUJAR TEXTO
function dibujarTexto(){
var canvas_texto=document.getElementById('texto');
var dibujo=canvas_texto.getContext('2d');
dibujo.textBaseline="ideographic";
dibujo.textAlign="center";
dibujo.font="2em Nueva";
dibujo.fillStyle="purple";
dibujo.fillText("TEXTO CANVAS",150,75);
}- strokeText(texto, x, y): este método dibujará el texto especificado en la posición x,y como una figura vacía (solo los contornos). Puede también incluir un cuarto valor para declarar el tamaño máximo. Si el texto es más extenso que este último valor, será encogido para caber dentro del espacio establecido.
- fillText(texto, x, y): Este método es similar al método anterior excepto que esta vez el texto dibujado será sólido.
// DIBUJAR DEGRADADO
function dibujarDegradado(){
var canvas_degradado=document.getElementById('canvas_degradado');
var dibujo=canvas_degradado.getContext('2d');
var degradado = dibujo.createRadialGradient(50,50,5,90,60,100);
degradado.addColorStop(0,"OrangeRed");
degradado.addColorStop(1,"Gold");
dibujo.fillStyle=degradado;
dibujo.arc(120,80,60,0,2*Math.PI,true);
dibujo.fill();
}- createLinearGradient(x0, y0, x1, y1) Este método crea un objeto que luego será usado para aplicar un gradiente lineal al lienzo. Donde sus parámetros son: x0: coordenada x del punto inicial del degradado. y0: coordenada y del punto inicial del degradado. x1: coordenada x del punto final del degradado y1: coordenada y del punto final del degradado.
- createRadialGradient(x1, y1, r1, x2, y2, r2) Este método crea un objeto que luego será usado para aplicar un gradiente circular o radial al lienzo usando dos círculos. Los valores representan la posición del centro de cada círculo y sus radios. x1: coordenada x del círculo inicial del degradado. y1: coordenada y del círculo inicial del degradado. r1: radio del círculo desde donde comenzar. x2: coordenada x del círculo final del degradado. y2: coordenada y del círculo final del degradado. r2: radio del círculo desde donde comenzar.
- addColorStop(posición, color) Este método especifica los colores a ser usados por el gradiente. El atributo posición es un valor entre 0.0 y 1.0 que determina dónde la degradación comenzará para ese color en particular.
// DIBUJAR TRANSFORMACIONES
function dibujarTransformacion(){
var canvas_degradado=document.getElementById('canvas_transformaciones');
var dibujo=canvas_degradado.getContext('2d');
dibujo.fillStyle="gold";
dibujo.arc(120,80,30,0,2*Math.PI,true);
dibujo.fill();
dibujo.translate(90,70);
dibujo.arc(120,80,40,0,2*Math.PI,true);
dibujo.fill();
}- translate(x,y): Este método de transformación es usado para mover el origen del lienzo. Es decir, permite mover el punto 0,0 a una posición específica para usar el origen como referencia para nuestros dibujos o para aplicar otras transformaciones.
rotate(angulo): Este método de transformación rotará el lienzo alrededor del origen tantos ángulos como sean especificados.scale(x, y): Este método de transformación incrementa o disminuye las unidades de la grilla para reducir o ampliar todo lo que esté dibujado en el lienzo.- Otros.
Descargar el código
