banner-pix

eBook: CANVAS HTML 5 – Composição gráfica e interatividade na web



  • R$ 33,00

Venda de e-book Compre na Amazon Compre no Google Play
Roque Fernando Marcos Sousa

É arquiteto da informação e escritor especialista na área web. Consultor em usabilidade, sistemas web e aplicativos em HTML5. Palestrante com larga experiência em plateias acima de 500 participantes, ministra treinamentos no Grupo Impacta Tecnologia desde 1999.


A quantidade de recursos, possibilidades e novos conceitos envolvidos no desenvolvimento de aplicativos e conteúdo web nos leva a perceber que os sites existentes, sem exceção, já ficaram ultrapassados. Estamos em uma era do desenvolvimento para internet, a era HTML5, da web semântica.

A tecnologia CANVAS é consequência desta nova era, sendo a mais indicada para projetos multimídia, jogos, objetos digitais e animações, por possuir o mais novo recurso de aceleração gráfica em browsers que diminui processos na CPU do usuário. 

O livro descreve métodos e propriedades do JavaScript que permitem criar e manipular objetos na interface 2D do CANVAS, resultando na melhoria do desempenho. 

Saiba como controlar formas e linhas através de novos recursos visuais, interatividade e sofisticação para os seus projetos em HTML5.

Desenvolver em CANVAS remete a um nível de alta criatividade, onde designers, programadores de interface e diretores de arte encontram um ambiente ideal para criação de experiências visuais ricas para a web.

Comprimento 0
E-ISBN 978-85-7452-700-0
Edição 1
Idioma Português
Lançamento 31/07/2014
Largura 0
Lombada 0
Páginas 160
Ano 2014
Sumário

Introdução

1. CANVAS

    1.1. Primeiros passos

    1.2. O elemento de marcação

    1.3. Criando um arquivo com padrão HTML5

    1.4. O objeto CANVAS

       1.4.1. Elemento inserido no documento HTML

       1.4.2. O atributo id para o elemento

    1.5. Suporte aos navegadores

       1.5.1. Exemplo

    1.6. Contexto 2D

       1.6.1. getContext()

       1.6.2. Vinculando um arquivo JavaScript ao documento HTML

       1.6.3. CanvasRenderingContext2D

2. CANVAS e JavaScript

    2.1. Boas práticas

       2.1.1. Não faça omissão das chaves

       2.1.2. Coloque as chamadas de script no encerramento da tag

       2.1.3. Utilize arrays

       2.1.4. Reduza a quantidade de variáveis globais

       2.1.5. Comente seu código

    2.2. Funções parametrizadas

       2.2.1. Exemplo de função utilizando dois parâmetros

    2.3. Bibliotecas JavaScript

       2.3.1. Paper

       2.3.2. Processing

       2.3.3. jCanvaScript

       2.3.4. oCanvas

       2.3.5. Raphael

    2.4. Ferramentas e recursos online

       2.4.1. Online Sprite Box Tool

       2.4.2. Online Font Testing Tool

       2.4.3. Online Pattern Generator Tool

       2.4.4. Online XRay Tool

3. Desenhando sobre o CANVAS

    3.1. Contexto 2D

       3.1.1. Verificando o suporte ao contexto do CANVAS via script

    3.2. Formas geométricas

       3.2.1. Criar formas retangulares

       3.2.2. Limpar formas retangulares

       3.2.3. Criar contornos retangulares

4. Preenchimentos sólidos e gradientes

    4.1. Opções para atribuição de cor

    4.2. Atribuindo um estilo de cor sólida

       4.2.1. Atribuindo um estilo de cor para um contorno

    4.3. Global Alpha

    4.4. Atribuindo cores gradientes

       4.4.1. Radial gradiente

       4.4.2. Linear gradiente

    4.5. Um exemplo com retângulos sorteando posições e cores

    4.6. Linhas e curvas

       4.6.1. Linha de grade

       4.6.2. Contornos

       4.6.3. Desenhando linhas

    4.7. Arcos e círculos

       4.7.1. Círculo básico

       4.7.2. Círculo básico com preenchimento

       4.7.3. Combinando círculos

       4.7.4. Semicírculos

    4.8. Formas em curvas Bézier

       4.8.1. Curvas quadráticas

       4.8.2. Curvas cúbicas

    4.9. Desenhando linhas da grade

5. Adicionando texto ao CANVAS

    5.1. Texto básico

    5.2. Contorno de texto

    5.3. Contornos e preenchimentos simultaneamente

    5.4. Aplicando sombra ao texto

    5.5. Alinhamento do texto

       5.5.1. Alinhamento ao centro

       5.5.2. Alinhamento à direita

    5.6. Medindo a largura do texto

    5.7. Usando imagens como textura para o texto

    5.8. Método toDataURL()

6. Exibindo e manipulando imagens

    6.1. Usando imagens externas

    6.2. Controlando a escala de proporção das imagens

    6.3. Enquadrando imagens em papel de parede

    6.4. Imagens e textos simultaneamente

    6.5. Recorte de imagens

    6.6. Exibindo imagens com Data URL e Ajax

7. Composição

    7.1. Modos de composição

    7.2. Salvando e restaurando o status do contexto

    7.3. Criando um clipe

       7.3.1. Comandos save() e restore()

8. Matrizes de transformação

    8.1. Os métodos setTransform() e transform()

    8.2. Translação e rotação

        8.2.1. Translação

       8.2.2. Rotação

    8.3. Escala

9. Vídeo em CANVAS

    9.1. Adicionando vídeo ao CANVAS

    9.2. Enquadrando módulos em um único vídeo

    9.3. Exibindo vídeos em áreas de recorte

    9.4. Criando amostras de vídeo (screenshots)

10. Animação

    10.1. Usando imagens em movimento

    10.2. Usando formas em movimento

    10.3. Criando gráficos estatísticos

11. Adicionando interatividade

    11.1. Capturando coordenadas de tela

    11.2. Controles de mouse (arrastar e soltar)

    11.3. Controlando animação com cliques

    11.4. Detectando colisões – Um jogo básico em CANVAS

Considerações finais: otimizando o canvas

Escreva um comentário

Acessar

Etiquetas: CANVAS, HTML5, Composição, gráfica, interatividade, web, eBook