You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
4.6 KiB
74 lines
4.6 KiB
# Trabalho: Explorar a API Canvas
|
|
|
|
## Objetivos de Aprendizagem
|
|
|
|
Ao completar este trabalho, irá demonstrar a sua compreensão dos fundamentos da API Canvas e aplicar a resolução criativa de problemas para construir elementos visuais usando JavaScript e canvas HTML5.
|
|
|
|
## Instruções
|
|
|
|
Escolha um aspeto da API Canvas que lhe interesse e crie um projeto visual cativante à sua volta. Este trabalho incentiva-o a experimentar as capacidades de desenho que aprendeu enquanto cria algo exclusivamente seu.
|
|
|
|
### Ideias de Projetos para se Inspirar
|
|
|
|
**Padrões Geométricos:**
|
|
- **Crie** uma galáxia de estrelas cintilantes animadas usando posicionamento aleatório
|
|
- **Desenhe** uma textura interessante usando formas geométricas repetidas
|
|
- **Construa** um efeito caleidoscópio com padrões coloridos em rotação
|
|
|
|
**Elementos Interativos:**
|
|
- **Desenvolva** uma ferramenta de desenho que responda aos movimentos do rato
|
|
- **Implemente** formas que mudam de cor quando clicadas
|
|
- **Desenhe** um ciclo simples de animação com elementos em movimento
|
|
|
|
**Gráficos Relacionados com Jogos:**
|
|
- **Crie** um fundo em deslocamento para um jogo espacial
|
|
- **Construa** efeitos de partículas como explosões ou feitiços mágicos
|
|
- **Crie** sprites animados com múltiplos frames
|
|
|
|
### Orientações para o Desenvolvimento
|
|
|
|
**Pesquisa e Inspiração:**
|
|
- **Explore** o CodePen para exemplos criativos com canvas (para inspiração, não para copiar)
|
|
- **Estude** a [documentação da API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) para métodos adicionais
|
|
- **Experimente** diferentes funções de desenho, cores e animações
|
|
|
|
**Requisitos Técnicos:**
|
|
- **Use** a configuração adequada do canvas com `getContext('2d')`
|
|
- **Inclua** comentários significativos explicando a sua abordagem
|
|
- **Teste** o seu código minuciosamente para garantir que funciona sem erros
|
|
- **Aplique** sintaxe moderna de JavaScript (const/let, funções arrow)
|
|
|
|
**Expressão Criativa:**
|
|
- **Concentre-se** numa funcionalidade da API Canvas, explorando-a profundamente
|
|
- **Adicione** o seu toque criativo para tornar o projeto pessoal
|
|
- **Considere** como a sua criação poderia fazer parte de uma aplicação maior
|
|
|
|
### Diretrizes de Entrega
|
|
|
|
Submeta o seu projeto concluído como um ficheiro HTML único com CSS e JavaScript embebidos, ou como ficheiros separados numa pasta. Inclua um comentário breve explicando as suas escolhas criativas e as funcionalidades da API Canvas que explorou.
|
|
|
|
## Rubrica
|
|
|
|
| Critério | Excelente | Adequado | Precisa de Melhoria |
|
|
|----------|-----------|----------|---------------------|
|
|
| **Implementação Técnica** | API Canvas usada criativamente com múltiplas funcionalidades, código executa na perfeição, sintaxe moderna de JavaScript aplicada | API Canvas usada corretamente, código corre com pequenas falhas, implementação básica | API Canvas tentada mas o código contém erros ou não executa |
|
|
| **Criatividade e Design** | Conceito altamente original com apelo visual polido, demonstra exploração profunda da funcionalidade Canvas escolhida | Bom uso das funcionalidades Canvas com alguns elementos criativos, resultado visual sólido | Implementação básica com criatividade ou apelo visual mínimos |
|
|
| **Qualidade do Código** | Código bem organizado, comentado, seguindo boas práticas, algoritmos eficientes | Código limpo com alguns comentários, segue padrões básicos de codificação | Código desorganizado, com poucos comentários, implementação ineficiente |
|
|
|
|
## Questões de Reflexão
|
|
|
|
Após concluir o seu projeto, considere estas questões:
|
|
|
|
1. **Que funcionalidade da API Canvas escolheu e porquê?**
|
|
2. **Que desafios encontrou ao desenvolver o seu projeto?**
|
|
3. **Como poderia expandir este projeto para uma aplicação maior ou um jogo?**
|
|
4. **Que outras funcionalidades da API Canvas gostaria de explorar a seguir?**
|
|
|
|
> 💡 **Dica Profissional**: Comece simples e adicione complexidade gradualmente. Um projeto simples e bem executado é melhor do que um projeto demasiado ambicioso que não funciona corretamente!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Aviso Legal**:
|
|
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, tenha em atenção que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes do uso desta tradução.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |