소개
이 프로젝트에서는 HTML Canvas 를 사용하여 이미지에 확대경 효과를 만드는 방법을 배우게 됩니다. 이 효과는 이미지 갤러리나 제품 웹사이트에서 자주 볼 수 있으며, 사용자가 이미지 위에 마우스를 올리면 특정 부분의 확대된 보기를 얻을 수 있습니다. 확대경 효과는 새로운 창이나 페이지를 열지 않고도 상세한 보기를 제공합니다.
👀 미리보기
🎯 과제
이 프로젝트에서는 다음을 배우게 됩니다:
- HTML Canvas 요소를 초기화하고 설정하는 방법
- Canvas 에 이미지를 로드하는 방법
- 마우스 움직임에 대한 이벤트 리스너를 구현하는 방법
- 선택기 및 확대된 표시를 위한 헬퍼 함수를 만드는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- Canvas API 를 사용하여 이미지를 그리고 조작할 수 있습니다.
- 마우스 좌표를 추적하고 마우스 움직임 이벤트에 응답할 수 있습니다.
- 이미지의 일부를 복사하고 표시하여 확대경 효과를 만들 수 있습니다.
