Canvas3 [그림 앱 만들기] 이미지, 텍스트 첨부, 저장하기 이미지 첨부 기능 파일 선택을 클릭하여 원하는 이미지를 캔버스 사이즈에 맞추어 업로드할 수 있다. 기술 - 다음 코드를 통해 이미지 파일을 입력받을 수 있도록 했다. (multiple 속성을 추가하여 여러 개 입력받을 수도 있다.) - 해당 파일의 정보를 불러와서 url(해당 브라우저에서만 유효하다)을 생성한다. - img tag를 생성하여 src를 url로 설정한다. // 이미지 파일을 선택하는 event가 발생했을 때 const file = event.target.files[0]; const url = URL.createObjectURL(file); const image = new Image(); image.src = url; - 이미지 파일을 캔버스에 나타내고, input의 value는 초기화한다... 2023. 2. 1. [그림 앱 만들기] 툴(색상 선택, 채우기, 버리기, 지우기) 만들기 색상 선택 기능 색상 네모를 선택하여 선의 색을 선택할 수 있다. 기술 - 색상의 div는 data-color:값으로 설정되어 있다. - 특정 색(div)이 클릭되면 해당 요소의 정보를 불러온다. const chosenColor = event.target.dataset.color; - 이미 설정된 네모를 선택하면 input(type="color")의 색도 함께 바뀌도록 설정한다. data attributes 참고 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes 채우기 기능 버튼 Fill을 클릭하고 캔버스에 클릭하면 색상이 채워진다. 기술 - isFilling이라는 변수를 만들어 Fill 버튼을 누르면 값을 true.. 2023. 2. 1. [그림 앱 만들기] canvas, 선 그리기, 선 두께 조절하기 기능 - canvas에 마우스 드래그를 통해 선을 그릴 수 있다. - 옆의 range input을 통해 선의 굵기를 조절할 수 있다. 기술 - canvas의 eventListener를 통해 마우스의 조작을 파악한다. - 마우스의 조작에 따라 선을 그린다. - 만약 마우스가 canvas를 벗어난다면 선 그리기가 중단되도록 한다. - range input 값을 통해 선의 굵기(lineWidth)를 조절한다. https://github.com/soaringwave/html-JS-css/commit/89cbb13c96d2517c14b4494c02ffe75c3494a319 2023. 1. 26. 이전 1 다음
