devryyeong / image-in-the-browser

Canvas API를 사용한 이미지 구현

브라우저에 이미지 구현하기

Vanilla JS와 Canvas API를 사용하여 이미지의 요소들을 구현

✏️ 구현 목록

• 이미지의 주요 요소 및 전체적인 레이아웃 구현
• 풍선의 모양은 원, 하트, 곰으로 총 3가지, 색은 red, orange, green, pink, navy, brown, white로 총 7가지로 구현
• 하단 중앙 집을 클릭하면 모양과 색이 랜덤인 풍선이 추가됨
• 각각의 풍선을 클릭하면 사라짐

🔧 설치 및 실행

깃 클론 및 설치 경로 이동

$ git clone https://github.com/devryyeong/image-in-the-browser.git
$ cd image-in-the-browser

설치

$ yarn

실행

$ yarn dev

📎 배포 주소 및 기능 설명

---

풍선 추가	풍선 삭제	구름 애니메이션
가운데에 있는 집 클릭시 랜덤 모양과 색의 풍선 추가	각각의 풍선 클릭시 삭제	구름이 상단에 수평으로 움직이는 애니메이션