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
# 과제: Canvas API 탐구하기
|
|
|
|
## 학습 목표
|
|
|
|
이 과제를 완료하면 Canvas API 기본 개념에 대한 이해를 입증하고 JavaScript와 HTML5 캔버스를 사용하여 시각적 요소를 만드는 창의적 문제 해결 능력을 적용할 수 있습니다.
|
|
|
|
## 지침
|
|
|
|
본인이 관심 있는 Canvas API의 한 측면을 선택하여 매력적인 시각적 프로젝트를 만드세요. 이 과제는 학습한 그리기 기능을 실험하면서 자신만의 독창적인 무언가를 만드는 데 중점을 둡니다.
|
|
|
|
### 영감을 주는 프로젝트 아이디어
|
|
|
|
**기하학적 패턴:**
|
|
- **무작위 위치를 이용하여** 반짝이는 애니메이션 별자리 만들기
|
|
- **반복되는 기하학적 모양을 활용해** 흥미로운 질감 디자인하기
|
|
- **회전하는 다채로운 패턴으로** 만화경 효과 구현하기
|
|
|
|
**인터랙티브 요소:**
|
|
- **마우스 움직임에 반응하는** 그리기 도구 개발하기
|
|
- **클릭 시 색상이 변하는** 도형 구현하기
|
|
- **움직이는 요소를 포함한** 간단한 애니메이션 루프 디자인하기
|
|
|
|
**게임 관련 그래픽:**
|
|
- **우주 게임을 위한** 스크롤 배경 제작하기
|
|
- **폭발이나 마법 효과 같은** 파티클 이펙트 제작하기
|
|
- **여러 프레임으로 구성된** 애니메이션 스프라이트 만들기
|
|
|
|
### 개발 지침
|
|
|
|
**연구 및 영감 얻기:**
|
|
- **CodePen에서** 창의적인 캔버스 예제 찾아보기 (영감을 위한 참고, 복사 아님)
|
|
- **[Canvas API 문서](https://developer.mozilla.org/docs/Web/API/Canvas_API)에서** 추가 메서드 학습하기
|
|
- **다양한 그리기 함수, 색상, 애니메이션을** 실험해보기
|
|
|
|
**기술 요구 사항:**
|
|
- **`getContext('2d')`를 사용하여** 올바른 캔버스 설정하기
|
|
- **코딩 접근법을 설명하는** 의미 있는 주석 포함하기
|
|
- **코드가 오류 없이 실행되는지** 철저히 테스트하기
|
|
- **최신 JavaScript 구문(예: const/let, 화살표 함수)** 적용하기
|
|
|
|
**창의적 표현:**
|
|
- **Canvas API 기능 하나에 집중하되** 깊이 있게 탐구하기
|
|
- **자기만의 창의적인 요소를 추가하여** 프로젝트를 개성 있게 만들기
|
|
- **자신의 결과물이 더 큰 애플리케이션 일부가 될 수 있을지** 고려하기
|
|
|
|
### 제출 지침
|
|
|
|
완성된 프로젝트를 CSS와 JavaScript가 포함된 단일 HTML 파일로 제출하거나 별도의 파일을 폴더에 넣어 제출하세요. 창의적인 선택과 탐구한 Canvas API 기능에 대해 간략히 설명하는 주석을 포함하세요.
|
|
|
|
## 평가 기준
|
|
|
|
| 기준 | 우수 | 충분 | 개선 필요 |
|
|
|----------|-----------|----------|-------------------|
|
|
| **기술 구현** | 다양한 기능을 창의적으로 활용한 Canvas API, 코드 완벽 작동, 최신 JS 문법 적용 | Canvas API를 올바르게 사용, 약간의 오류 있음, 기본 구현 | Canvas API 시도는 했으나 코드 오류 발생하거나 작동하지 않음 |
|
|
| **창의성 및 디자인** | 매우 독창적인 컨셉과 완성도 높은 시각적 매력, 선택한 Canvas 기능 깊이 탐구 | Canvas 기능을 잘 활용하고 일부 창의적 요소 포함, 견고한 시각적 결과 | 최소한의 창의성 또는 시각적 매력이 있는 기본 구현 |
|
|
| **코드 품질** | 잘 구조화되고 주석 포함, 모범 사례를 따름, 효율적인 알고리즘 | 깔끔한 코드에 일부 주석 포함, 기본 코딩 규칙 준수 | 코드 정리 부족, 주석 매우 적음, 비효율적 구현 |
|
|
|
|
## 성찰 질문
|
|
|
|
프로젝트를 완료한 후 다음 질문들을 고려해 보세요:
|
|
|
|
1. **어떤 Canvas API 기능을 선택했고, 왜 선택했나요?**
|
|
2. **프로젝트를 진행하면서 어떤 어려움을 겪었나요?**
|
|
3. **이 프로젝트를 더 큰 애플리케이션이나 게임으로 확장하려면 어떻게 할 수 있을까요?**
|
|
4. **앞으로 탐구하고 싶은 다른 Canvas API 기능은 무엇인가요?**
|
|
|
|
> 💡 **프로 팁**: 간단하게 시작해서 점차 복잡성을 더하세요. 잘 완성된 간단한 프로젝트가 제대로 작동하지 않는 무리한 프로젝트보다 훨씬 낫습니다!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**면책 조항**:
|
|
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 있을 수 있음을 유의하시기 바랍니다. 원본 문서의 원어 버전을 권위 있는 출처로 간주해야 합니다. 중요한 정보의 경우 전문 인력에 의한 번역을 권장합니다. 본 번역물의 사용으로 인한 오해나 잘못된 해석에 대해서 당사는 책임을 지지 않습니다.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |