Canvas 2D
그래픽스 · 4단계 · 28개 학습 단위
시리즈 목표
논리 좌표와 픽셀을 구분하고 시간 기반 Canvas 편집기를 직접 구성한다.
선수 지식
JavaScript·좌표와 함수
실습 방식과 제공 범위
학습 단위는 날짜가 아닙니다. 설명과 과제를 읽고, 완료 조건을 확인한 뒤 다음 단위로 이동하세요. 각 단위의 예제를 출발점으로 삼아 변수를 바꾸고 결과를 관찰합니다. 내장 실행 예제와 별도 환경이 필요한 과제를 구분해서 표시합니다. 예제를 여는 것만으로 학습을 완료한 것으로 처리하지 않습니다.
기존 단위 ID와 필기는 유지됩니다. 기존 01·02·03 예제는 확장된 학습 순서의 1·14·28번째에 연결되므로 주소의 숫자와 화면의 학습 순서가 다를 수 있습니다.
학습 경로
1단계 · 픽셀과 드로잉 상태
- 01. 좌표와 픽셀 — 편집 가능한 예제
- 02. 경로와 선의 상태 — 편집 가능한 예제
- 03. 도형 함수와 상태 격리 — 편집 가능한 예제
- 04. 행렬과 회전 중심 — 편집 가능한 예제
- 05. 색과 그라디언트 — 편집 가능한 예제
- 06. 이미지 로딩과 자르기 — 편집 가능한 예제
- 07. 텍스트와 배지 구성 — 편집 가능한 예제
2단계 · 시간·좌표·입력
- 08. 애니메이션 시계 — 편집 가능한 예제
- 09. 정지와 재개 — 편집 가능한 예제
- 10. 경계 충돌과 적분 — 편집 가능한 예제
- 11. 포인터 좌표 변환 — 편집 가능한 예제
- 12. 도형 선택과 히트 테스트 — 편집 가능한 예제
- 13. 드래그와 포인터 수명 — 편집 가능한 예제
- 14. 시간과 입력 — 편집 가능한 예제
3단계 · 장면 편집과 합성
- 15. 장면 데이터와 다시 그리기 — 편집 가능한 예제
- 16. 실행 취소와 기록 — 편집 가능한 예제
- 17. 합성으로 지우개 만들기 — 편집 가능한 예제
- 18. 클리핑과 마스크 — 편집 가능한 예제
- 19. 픽셀 읽기와 필터 — 편집 가능한 예제
- 20. 정적 레이어와 캐시 — 편집 가능한 예제
- 21. 고해상도와 반응형 — 편집 가능한 예제
4단계 · 접근성·입자·성능 검증
- 22. 접근 가능한 캔버스 조작 — 편집 가능한 예제
- 23. 내보내기와 원본 데이터 — 편집 가능한 예제
- 24. 입자 상태와 방출 — 편집 가능한 예제
- 25. 입자 재사용과 할당 — 편집 가능한 예제
- 26. 프레임 계측과 병목 — 편집 가능한 예제
- 27. 통합 편집기와 회귀 점검 — 편집 가능한 예제
- 28. 입자와 비용 — 편집 가능한 예제
통합 프로젝트와 제출물
도형 편집·실행 취소·입자 미리보기·PNG/JSON 저장을 갖춘 캔버스 실험실과 비교 보고서
구현 코드와 실행 방법, 기준 조건과 변경 조건의 기록, 실패 사례와 복구 방법을 함께 남기세요. 측정하지 않은 성능과 수행하지 않은 테스트는 결과로 기재하지 않습니다.