Html 5 canvas

HTML5:
Canvas
Un lienzo en la
Web
Miguel Angel Cumpa Ascuña

Objetivo

3D, Graphics
& Effects

Objetivo de la sesión
●

Presentar y describir las características de
canvas
●

Citar los antecedentes que derivaron su creación

●

El efecto que tiene sobre otros estándares

●

Demostrar su uso a través de código para una
aplicación

Antecedentes

3D, Graphics
&Effects

Imágenes / Canvas
●

●

Para mostrar gráficos en la web utilizamos
imágenes en formatos GIF, PNG, JPG

Canvas no sólo nos permite generar gráficos
sino podemos utilizar imágenes preexistentes

SVG / Canvas
●

●

SVG es un estándar, mientras que Canvas es
una nueva etiqueta HTML
SVG está basado en XML mientras que
Canvas es creado mediante
y su contenido escompletado con Javascript

Canvas

3D, Graphics
& Effects

Canvas
●

Etiqueta o elemento en HTML5 que permite la
generación de gráficos en forma dinámica por
medio de programación dentro de una página.
●

●

●

Posee dos atributos width (ancho) y height (alto), el
tamaño por defecto es 150.
Permite generar gráficos 2D, juegos, animaciones y
composición de imágenes
SVG es otraetiqueta que cumple con funciones
similares

1, 2, 3,
Canvas
3D, Graphics
& Effects

1, 2, 3, Canvas
●

●

●

Antes de que podamos empezar a dibujar,
tenemos que hablar de la grilla de lienzo o
espacio de coordenadas
Normalmente una unidad corresponde a 1px en
canvas
El origen de la grilla esta en la esquina superior
izquierda (coordenada(0,0))

1, 2, 3, Canvas
●

Nota:Podemos cambiar el origen a una
posición diferente, gire la red e incluso la
escala.

1, 2, 3, Canvas
Definir la etiqueta
●



1, 2, 3, Canvas
Verificar si el navegador soporta canvas
●

var canvas =
document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// dibuja con tú código aquí
} else {
alert(“Su navegador no soporta canvas :O”);
}Formas
Básicas
3D, Graphics
& Effects

Formas Básicas
Definir relleno
●

●

fillStyle = "rgb(200,0,0)";
Define el color de relleno
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";

Formas Básicas
Dibujar formas básicas
●

●

●

fillRect(x,y,width,height) : Dibuja un rectángulo
con relleno
strokeRect(x,y,width,height) : Dibuja un
contornorectangular
clearRect(x,y,width,height) : Borra el área
especificada y hace que sea totalmente
transparente

Formas Básicas
Ejemplo
●

function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}

Formas Básicas
Dibujar lineas
●●

●

Internamente, las rutas se almacenan como una lista
de sub-rutas (líneas, arcos, etc) que en conjunto
forman una forma
BeginPath() : La lista se pone a cero y podemos
empezar a dibujar nuevas formas
ClosePath() : Intenta cerrar la forma al trazar una
línea recta desde el punto actual al principio. Si la
forma ya se ha cerrado o no hay un solo punto en la
lista esta función nohace nada.

Formas Básicas
●

●
●

Stroke() : Se utiliza para dibujar una forma con
contorno
Fill() : Se utiliza para pintar una forma sólida
Nota: Al llamar al método Fill(), las formas
abiertas se cerrarán automáticamente y no es
necesario utilizar el método ClosePath()

Formas Básicas
Coordenadas del pincel
●

MoveTo(x, y): Equivale a levantar el pincel de
un punto ycolocarlo en el siguiente.
La función moveTo toma dos argumentos, x e
y, que son las coordenadas del nuevo punto de
partida.

Formas Básicas
Lineas
●

lineTo(x, y) : Es un método que nos permitirá
dibujar una linea recta.
Este método toma dos argumentos x e y, que
son las coordenadas del punto final de la línea.
El punto de partida depende de los trazados
anteriores, donde el punto final...