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
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
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
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.
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
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 controls autoplay loop>
<source src="song1.mp3" type="audio/mp3">
<source src="song1.wav" type="audio/wav">
<source src="song1.ogg" type="audio/ogg">
</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
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
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
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
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
Referências
- Pro HTML5 Programming, Second Edition; Peter Lubbers, Brian Albers & Frank Salim
- HTML5 Canvas, Second Edition; Steve Fulton & Jeff Fulton
-
http://www.w3.org/TR/SVG11/