Canvas e SVG

John Freddy Garavito - Leandro Costa Valadão

Instituto de Ciências Matemáticas e de Computação

UNIVERSIDADE DE SÃO PAULO

São Carlos - Brasil, Maio 2014

Roteiro

Introdução

Desenhando no Canvas

HTML5 Text API

Imagens no Canvas

Animações no Canvas

Video e Canvas

Games no Canvas

Audio

Novidades no Canvas

SVG

Exemplos Extra

Atividade Prática

Introdução

HTML5 é uma iteração do HTML que trouxe mais “vida” a WWW.

Canvas significa tela, como exemplo a tela de desenho de um artista.

Canvas é uma área da tela do browser que foi transformada em Bitmap e permite manipulação 2d de elementos.

Tecnologias gráficas.

2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL

Canvas e SVG

Introdução

Utilizando o JavaScript pode-se fazer inúmeras coisas no canvas. Manipulação e reconhecimento com teclas do teclado ou manipulação com mouse e também os desenhos, animações.

O elemento Canvas pode ser acessível pelo DOM do browser, porém o conteúdo 2d que foi feito no canvas não é acessível a partir do DOM.

Exemplo Hello World!

Desenhando no Canvas

Para usar canvas efetivamente é necessário ter conhecimentos sobre desenho, cores e transformações bidimensionais. Assim como saber trabalhar em uma liguagem de script reconhecida pelo navegador.

Formas no canvas: retângulos, círculos, ou qualquer desenho que quiser fazer.

Desenhando no canvas

Como o contexto do mapa de bits é 2d torna-se necessário ter uma noção de como e onde desenhar na tela do canvas.

DESENHANDO NO CANVAS

desenhando no canvas

Exemplo desenhando Retangulos simples.

Exemplo desenhando uma arvore.

HTML5 Text API

Esta ferramenta possibilita a criação de textos. Que antes eram bastante complexas ou até impossíveis de se fazer de outra forma.

Interessante ressaltar que apesar de parecido o canvas para texto não tem nada a ver com texto utilizando css.

Existem maneiras de se trabalhar com formulários juntamente com a ferramenta de texto no canvas. Depende da necessidade!

HTML5 TEXT API

Existem inúmeras maneiras de se tratar o texto; como é uma ferramenta de desenho e que dá suporte a este tipo de técnica depende muito da criatividade e do conhecimento com a técnica para se fazer o que deseja.

Exemplo

html5 text api

Imagens no canvas

A API do canvas (utilizando JavaScript) permite acesso ao DOM, assim possibilita trabalhar com imagens que estejam nele ou ela pode ser carregada pelo JavaScript.

Utilizando este tipo de API no browser é possível manipular vários tipos de objetos, assim como fazer animações, e outros tipos de manipulação de acordo com a necessidade do usuário ou da aplicação.

Imagens no canvas

Algumas funções clássicas com canvas e imagens seria por exemplo um vídeo que se fragmenta em imagens para poder ter uma noção do conteúdo do vídeo.

Exemplo trabalhando com imagens no canvas.

Exemplos reais de imagens com canvas.

http://www.thiagogoiis.xpg.com.br/treinamento/audioVideo.html

Animações no canvas

Animações e processamentos mais avançados antes eram possíveis por plug-ins, porém com os avanços do canvas foram feitos vários metodos para se trabalhar isto.

É importante lembrar que para fazer animações e/ou movimentações não basta somente jogar um efeito, é necessário utilizar o efeito que o usuário espera.

Animações no canvas

São vários os tipos de movimentações e animações que o canvas permite.

Movimentação em linha reta.

Movimentações simples.

Jogos!

Alguns Exemplos de Animações.

Videos NO CANVAS

Com as otimizações do HTML5 não é necessário mais um plug-in para passar elementos de vídeos nos browsers.

Com isto traz-se a oportunidade de fazer e trabalhar inúmeras funções.

Existem várias formas de se manipular vídeo no HTML5.

Exemplo.

VIDEOS NO CANVAS

Para manipular o vídeo corretamente no canvas é necessário primeiro verificar se o vídeo carregou e/ou o quanto ele carregou, pois a maneira de se trabalhar no canvas é diferente. Caso o vídeo não esteja carregado dará um erro no Java Script.

Interessante ressaltar que existem várias aplicações que usam canvas com vídeo (Youtube).

Utilizando estas tecnologias em conjunto é possível processar o vídeo em tempo real e fazer várias mudanças nele.

Games no canvas

Jogos são a grande razão para que muitos utilizem computador e muitos entrem para o ramo da computação.

Antes do HTML5 eram possíveis jogos em browser utilizando plug-ins como Flash.

Porém com o avanço das tecnologias e dos browsers isto foi se tornando obsoleto e com as novas tecnologias que são fornecidas, jogos e outros aplicativos podem ser executados no browser diretamente sem a necessidade de plug-ins ou outros aplicativos externos.

Games no Canvas

http://www.relfind.com/game/magician.html

http://www.spacegoo.com/maze/

Com todas as interações que foram mostradas que o Canvas possui trabalhar com games nele é apenas organizar imagens e desenhos e animações para que se tenha um jogo no browser.

Áudio

Não se pode fazer a manipulação direta de áudio por meio do Canvas, mas se pode fazer por meio de código Javascript que interage em uma extra dimensão de som, o áudio é representado pelo objeto:

Object <audio>: HTMLAudioElement

Exemplo: <audio src="song1.ogg" controls>

Áudio

Um problema é a compatibilidade dos formatos padrão de áudio, os Browser suportam os seguintes, pelo qual aconselha-se converter os áudios nos padrões aceitos por meio de uma ferramenta como Audacity e fornecer os trés formatos mais compatíveis.

Platform	.ogg	.mp3	.waw
Chrome	X	X	X
Firefox	X		X
Safari		X	X
Opera	X		X
Internet Explorer		X

Áudio

Recomenda-se inserir os áudios nos três formatos mais usados, com a finalidade de permitir sua compatibilidade com todos os Browsers

</audio>

Áudio

A mistura com Canvas se faz por meio de Javascript acedendo aos objetos HTMLAudioElement que sejam requeridos.

var audioElement = document.createElement("audio");

audioElement.setAttribute("src", "sounds/song.waw");

audioElement.play();

Novidades no Canvas

Existem muitos estudos e aprimorações que estão sendo feitas no canvas e no HTML5 em si.

Canvas com WebGl para aplicações 3D.

WebGl permite utilizar a placa gráfica do computador assim como OpenGl, com isto é possível renderizar aplicações, objetos e outras coisas em 3D, porém os browsers ainda não possuem suporte para tais aplicações, alguns já estão melhorando esta parte.

SVG

É uma linguagem expressiva para gráficos de duas dimensões.

SVG 1.0 foi publicado como uma recomendação no 2001, antigamente só podia chamar os documentos SVG desde a página, agora se pode criar SVG em linha que pode ficar junto com a marcação HTML.

Raster and Vector Graphics

Em gráficos “Raster” as imagens são apresentadas por uma “Grid” de dois dimensões de pixels Canvas utiliza este tipo de abordagem, gráficos vectoriais são totalmente diferentes porque representam as imagens com uma descrição matemática da geometria delas.

Scalable Vector Graphics

Muitos desenhos feitos com SVG são visualmente idênticos que os mesmos desenhos feitos feitos com Canvas, porem existem varias características como a não dependência da escala para as imagens SVG, a representação no DOM para o objeto SVG e para todos seus objetos internos e o texto é selecionável e cada um dos objetos podem ser procurados e indexado nos buscadores Web.

Por exemplo Google indexa o texto relacionado com o SVG.

Exemplo: HelloWorld em

http://biomac.icmc.usp.br/canvas/svg.html

Scalable Vector Graphics

Uma imagem vectorial contem a informação necessária para desenhar objetos geométricos de alto nível, tais como linhas e formas.

SVG se pode misturar com HTML, JS e CSS mediante a estrutura de DOM, também se pode programar aplicações interativas por meio de eventos nos objetos SVG.

A estrutura DOM pode ser olhada no Browser, o que facilita o desenvolvimento do aplicativo

Scalable Vector Graphics

Se podem fazer mudanças como adicionar, remover ou editar o código sobre o DOM, as quais atualizam imediatamente a representação SVG, o qual é conveniente para “debugging” e “experimenting.”

Scalable Vector Graphics

Os desenhos SVG tem enfoque permanente em comparação aos desenhos Canvas, por exemplo quando a página web onde esta o SVG é salvada, o desenho fica no arquivo armazenado, o que não acontecia com Canvas.

Gráficos escaláveis

Quando os graficos SVG são ampliados, rotados ou transformados eles conservam total coerência e qualidade em comparação ao desenho inicial.

Scalable Vector Graphics

Formas simples

Inclui formas simples como retângulos, círculos e elipses.

Exemplo: Basic Shapes em

http://biomac.icmc.usp.br/canvas/svg.html

Scalable Vector Graphics

Transformações

Pode se fazer transformações geométricas como transladar, girar ou escalar elmentos SVG ou grupos destes elementos, neste caso se utilizou o elemento “<g>” que significa “group”.

Exemplo: Transformations em

http://biomac.icmc.usp.br/canvas/svg.html

Scalable Vector Graphics

Reutilização de conteúdo

SVG tem o elemento “<defs>” que permite definir conteúdo para uso futuro, por meio do elemento “<use>” se pode fazer uma ligação ás definições.

Exemplo: Reusing Content em

http://biomac.icmc.usp.br/canvas/svg.html

Scalable Vector Graphics

Clipping

Os objetos SVG podem definir mascaras para fazer novas visualizações dos elementos, estas mascaras podem ser de jeito interno ou externo

Exemplo: Clipping em

http://biomac.icmc.usp.br/canvas/svg.html

Scalable Vector Graphics

Padrões e gradientes

Os objetos SVG podem ser pintados com estilos complexos, incluindo gradientes e padrões, os gradientes podem ser radiais ou lineais, os padrões podem ser feito de gráficos de pixels ou de outros elementos SVG.

Exemplo: Patterns and Gradients em

http://biomac.icmc.usp.br/canvas/svg.html

Scalable Vector Graphics

Trajetos SVG

Permite desenhar caminhos de forma simples e sombras, por meio do elemento <path> que tem o atributo “d” de “data” que permite armazenar um conjunto de comandos de desenho, os quais tomam coordenadas como argumento.

M: Movimento, L: Linha, Q: Curva quadrática, Z: Fechar o trajeto.

Exemplo: Paths & Curve Paths

Scalable Vector Graphics

Texto SVG

O texto em SVG é selecionável dentro do Browser, também pode ser utilizado pelos motores de busca para indexar o conteúdo relacionado com o gráfico SVG, isto fornece benefícios em usabilidade e accessibilidade, também tem atributos de estilo muito semelhantes a CSS.

Exemplo: Formated text

Scalable Vector Graphics

Aplicativos que fazem uso de SVG

Scalable Vector Graphics

Exemplos

Synchronised animation and audio

http://svg-wow.org/camera/camera.xhtml

Animated world landmarks re-created in SVG

http://svg.kvalitne.cz/worldlandmarks/worldlandmarks.svg

An interactive SVG jigsaw

http://lavadip.com/experiments/jigsaw/

Animated lyrics in SVG

http://svg-wow.org/audio/animated-lyrics.svg

Scalable Vector Graphics

Exemplos

Analytics with Raphael and SVG

http://raphaeljs.com/analytics.html

Custom Charts

http://raphaeljs.com/github/impact.html

New controls

http://raphaeljs.com/polar-clock.html

http://raphaeljs.com/curver.html

http://raphaeljs.com/graffle.html

http://raphaeljs.com/australia.html

Exemplos Extra

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html

http://www.tecmundo.com.br/html5/41617-html5-surpreenda-se-com-as-possibilidades-graficas-de-canvas.htm

http://www.spacegoo.com/maze/ http://www.ro.me/

http://www.devlounge.net/code/10-awesome-html5-canvas-examples

http://www.thewildernessdowntown.com/

Atividade Prática

Referências

Pro HTML5 Programming, Second Edition; Peter Lubbers, Brian Albers & Frank Salim

HTML5 Canvas, Second Edition; Steve Fulton & Jeff Fulton

http://www.w3schools.com/html/html5_canvas.asp

http://www.w3schools.com/svg/

http://www.w3.org/TR/SVG11/

http://www.ro.me/

Fundamentos Hipermidia

By hipermidia

Canvas e SVG

Roteiro

Introdução

Tecnologias gráficas.

Canvas e SVG

Introdução

Desenhando no Canvas

Desenhando no canvas

DESENHANDO NO CANVAS

desenhando no canvas

Existem inúmeras maneiras de se tratar o texto; como é uma ferramenta de desenho e que dá suporte a este tipo de técnica depende muito da criatividade e do conhecimento com a técnica para se fazer o que deseja. Exemplo

html5 text api

Imagens no canvas

Imagens no canvas

Imagens no canvas

Algumas funções clássicas com canvas e imagens seria por exemplo um vídeo que se fragmenta em imagens para poder ter uma noção do conteúdo do vídeo. Exemplo trabalhando com imagens no canvas. Exemplos reais de imagens com canvas. http://www.thiagogoiis.xpg.com.br/treinamento/audioVideo.html

Animações no canvas

Animações no canvas

Videos NO CANVAS

VIDEOS NO CANVAS

Games no canvas

Games no Canvas

Áudio

Áudio

Áudio

Áudio

Novidades no Canvas

SVG

Raster and Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Se podem fazer mudanças como adicionar, remover ou editar o código sobre o DOM, as quais atualizam imediatamente a representação SVG, o qual é conveniente para “debugging” e “experimenting.”

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Scalable Vector Graphics

Exemplos Extra

Atividade Prática

Referências

Fundamentos Hipermidia

Existem inúmeras maneiras de se tratar o texto; como é uma ferramenta de desenho e que dá suporte a este tipo de técnica depende muito da criatividade e do conhecimento com a técnica para se fazer o que deseja.

Exemplo