Aprenda HTML Canvas: Efeitos Avançados de Texto

Leve seu texto animado para o próximo nível

Classificação: 5.0 de 527 avaliações 1,5 horas totais 15 palestras Nível intermediário

Torne-se um mestre da animação web

Desde desenhar uma única letra até criar um texto de partículas animadas em várias linhas, este curso abrangente de HTML canvas levará você do básico ao avançado em apenas uma aula. Explore as possibilidades do desenvolvimento web front-end moderno e transforme texto em sistemas complexos de partículas animadas.

Pratique JavaScript puro, sem frameworks e bibliotecas

Aprenda a escrever protótipos e experimentos de codificação criativa usando uma base de código procedural simples (linha por linha). Converta esses experimentos em uma sintaxe JavaScript orientada a objetos mais modular. Experimente com código e descubra como criar a versão base do efeito passo a passo. Aplique algoritmos de constelação para efeitos visuais únicos. Aprenda a usar gradientes de canvas, fontes web personalizadas e manipular formas de partículas e física para obter diferentes visuais e movimentos. Essa técnica também pode ser aplicada a logotipos de empresas, mesmo que o logotipo seja uma combinação de texto, símbolos e imagens.

Código-fonte incluído

Com a última lição, você terá acesso para baixar o código-fonte completo, bem como algumas variações experimentais da base de código.

Do básico ao avançado

É necessário ter conhecimento básico de HTML, CSS e JavaScript. A primeira parte do curso é adequada para iniciantes, abordando como configurar um canvas HTML, como desenhar texto usando os métodos integrados fillText e strokeText, e várias ferramentas e técnicas de estilização. A segunda parte explora algoritmos mais avançados, ensinando como desenhar texto centralizado em várias linhas no canvas HTML, transformá-lo em partículas, criar sistemas de partículas interativos e muito mais.

O que você aprenderá

- Como desenhar e estilizar texto em várias linhas no canvas HTML - Como converter texto em um sistema de partículas animadas - Praticar JavaScript puro e técnicas de desenvolvimento web front-end - Aplicar física e técnicas avançadas de animação