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 es completado 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 otra etiqueta 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óndiferente, 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 contorno rectangular clearRect(x,y,width,height) : Borra el área especificada y hace quesea 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 no hace nada.

●

●

Formas Básicas
●

Stroke() : Se utiliza para dibujar una formacon 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 y colocarlo en el siguiente. La función moveTo toma dos argumentos, x e y, que son lascoordenadas 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 de la ruta anterior es el punto de partida para la siguiente, etc. El punto de partida...