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.8 KiB
74 lines
4.8 KiB
# Tarea: Explora la API de Canvas
|
|
|
|
## Objetivos de Aprendizaje
|
|
|
|
Al completar esta tarea, demostrarás tu comprensión de los fundamentos de la API de Canvas y aplicarás la resolución creativa de problemas para construir elementos visuales utilizando JavaScript y canvas de HTML5.
|
|
|
|
## Instrucciones
|
|
|
|
Elige un aspecto de la API de Canvas que te interese y crea un proyecto visual atractivo alrededor de él. Esta tarea te anima a experimentar con las capacidades de dibujo que has aprendido mientras construyes algo que sea exclusivamente tuyo.
|
|
|
|
### Ideas de Proyectos para Inspirarte
|
|
|
|
**Patrones Geométricos:**
|
|
- **Crea** una galaxia de estrellas parpadeantes animadas usando posicionamiento aleatorio
|
|
- **Diseña** una textura interesante usando formas geométricas repetidas
|
|
- **Construye** un efecto caleidoscopio con patrones giratorios y coloridos
|
|
|
|
**Elementos Interactivos:**
|
|
- **Desarrolla** una herramienta de dibujo que responda a los movimientos del ratón
|
|
- **Implementa** formas que cambien de color al hacer clic
|
|
- **Diseña** un loop de animación simple con elementos en movimiento
|
|
|
|
**Gráficos Relacionados con Juegos:**
|
|
- **Elabora** un fondo en desplazamiento para un juego espacial
|
|
- **Construye** efectos de partículas como explosiones o hechizos mágicos
|
|
- **Crea** sprites animados con múltiples cuadros
|
|
|
|
### Guías para el Desarrollo
|
|
|
|
**Investigación e Inspiración:**
|
|
- **Navega** por CodePen en busca de ejemplos creativos de canvas (para inspiración, no para copiar)
|
|
- **Estudia** la [documentación de la API de Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) para métodos adicionales
|
|
- **Experimenta** con diferentes funciones de dibujo, colores y animaciones
|
|
|
|
**Requisitos Técnicos:**
|
|
- **Usa** una configuración correcta del canvas con `getContext('2d')`
|
|
- **Incluye** comentarios significativos que expliquen tu enfoque
|
|
- **Prueba** tu código cuidadosamente para asegurar que funcione sin errores
|
|
- **Aplica** sintaxis moderna de JavaScript (const/let, funciones flecha)
|
|
|
|
**Expresión Creativa:**
|
|
- **Concéntrate** en una característica de la API de Canvas pero explórala en profundidad
|
|
- **Agrega** tu propio toque creativo para hacer el proyecto personal
|
|
- **Considera** cómo tu creación podría ser parte de una aplicación más grande
|
|
|
|
### Pautas para la Entrega
|
|
|
|
Entrega tu proyecto completado como un único archivo HTML con CSS y JavaScript integrados, o como archivos separados en una carpeta. Incluye un breve comentario explicando tus elecciones creativas y las características de la API de Canvas que exploraste.
|
|
|
|
## Rúbrica
|
|
|
|
| Criterios | Ejemplar | Adecuado | Necesita Mejorar |
|
|
|----------|-----------|----------|-------------------|
|
|
| **Implementación Técnica** | API de Canvas usada creativamente con múltiples características, código funciona sin errores, sintaxis moderna de JavaScript aplicada | API de Canvas usada correctamente, código funciona con problemas menores, implementación básica | Intento con la API de Canvas pero el código tiene errores o no se ejecuta |
|
|
| **Creatividad y Diseño** | Concepto altamente original con atractivo visual pulido, demuestra exploración profunda de la característica de Canvas elegida | Buen uso de las características de Canvas con algunos elementos creativos, resultado visual sólido | Implementación básica con creatividad o atractivo visual mínimo |
|
|
| **Calidad del Código** | Código bien organizado y comentado siguiendo buenas prácticas, algoritmos eficientes | Código limpio con algunos comentarios, sigue estándares básicos de codificación | Código desorganizado, comentarios mínimos, implementación ineficiente |
|
|
|
|
## Preguntas de Reflexión
|
|
|
|
Después de completar tu proyecto, considera estas preguntas:
|
|
|
|
1. **¿Qué característica de la API de Canvas elegiste y por qué?**
|
|
2. **¿Qué desafíos encontraste mientras construías tu proyecto?**
|
|
3. **¿Cómo podrías extender este proyecto hacia una aplicación o juego más grande?**
|
|
4. **¿Qué otras características de la API de Canvas te gustaría explorar a continuación?**
|
|
|
|
> 💡 **Consejo Profesional**: Comienza simple y añade complejidad gradualmente. ¡Un proyecto simple bien ejecutado es mejor que uno demasiado ambicioso que no funcione correctamente!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Aviso legal**:
|
|
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por la exactitud, tenga en cuenta que las traducciones automáticas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de ningún malentendido o interpretación errónea que resulte del uso de esta traducción.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |