반응형
Data-Type
-
JavaScript 입문 : Canvas 이론 정리 - 그림판 만들기 (이미지 적용 및 이미지 저장)컴퓨터 알아가기/JavaScript 2022. 12. 26. 19:30
그림판을 사용한다는 것은 기본적으로 나만의 디자인을 만들수 있다는 것이고 해당 이미지를 저장하는 기능을 담아야 합니다. 따라서 만들어진 캔버스 그림판 기본형태에 이미지를 적용하는 방법과 별도로 그려진 이미지를 저장하는 기능을 탑재해 보도록 하겠습니다. 본 내용은 '1분코딩의 HTML5 Canvas 라이브 강좌'를 기본으로 공부하고 있습니다. ▒ 이미지 적용하기 1. 이미지 버튼 만들고 그림판 적용 같은 방식으로 이미지 버튼을 하나 만들겠습니다. 사용할 이미지는 기존 코끼리 이미지를 활용하도록 하겠습니다. 상기 그림판을 보면 컬러버튼 옆에 꼬끼리 이미지가 보입니다. 2. 컬러와 이미지 구분 그림판에 컬러만 있다면 data-color로 event.target을 잡을수 있으나 이제는 컬러와 이미지를 구분해야 ..