코딩이야기45 [JavaScript] - 그림판 만들기 ④ (모드바꾸기⑵) 저장버튼, 화면 지우기 버튼, 지우개 버튼 만들기 html에 버튼 3개를 만들고 JS에서 변수를 선언해줍니다. 그 후 클릭이벤트를 각각 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //-------------html----------------// const saveBtn = document.querySelector(".save"); const newBtn = document.querySelector(".new-btn"); const eraserBtn = document.querySelector(".eraser-btn"); saveBtn.addEventListener("click", saveClick); //저장하기 newBtn.addEventListener("c.. 2022. 7. 25. [JavaScript] - 그림판 만들기 ③ (모드바꾸기⑴) 그리기 모드, 그림 채우기 모드와 전체 배경색 채우기 모드 만들기 html에 버튼을 3개 만들어 준 후 JS에 변수를 선언합니다. 그 후 클릭이벤트 3개를 만들어 줍니다. 1 2 3 4 5 6 7 8 그리기모드 그림채우기 배경채우기 const paintingBtn = document.querySelector(".painting-btn"); const paintingFillBtn = document.querySelector(".painting-fill-btn"); const bgFillBtn = document.querySelector(".bg-fill-btn"); cs 1 2 3 paintingBtn.addEventListener("click", paintingBtnClick); paintingFillB.. 2022. 7. 25. [JavaScript] - 그림판 만들기 ② (색깔 선택, 색상표) [input으로 색상표 만들기] html에 type=color의 속성을 가진 input을 만들어 줍니다. JS에 input에 대한 변수를 선언해주고 change 이벤트를 만들어줍니다. color.addEventListener("change", colorChange); 함수를 만들고 console.log(event.target.value)를 해보면 색상표의 값이 나오는 것을 볼 수 있습니다. event.target.value의 값을 ctx.strokeStyle에 넣어줍니다. 1 2 3 4 function colorChange(event) { const colorValue = event.target.value; ctx.strokeStyle = colorValue; } Colored by Color Scrip.. 2022. 7. 25. [JavaScript] - 그림판 만들기 ① (그리기, 굵기 조절) 그림판을 만들 때에는 canvas라는 api를 이용합니다. html에 api를 만들어 준 뒤 const ctx = canvas.getContext("2d"); getContext라는 메소드는 canvas에 2d,3d 선택지를 주는데 2d를 선택해줍니다. 그 후 JS와 CSS에 각각 width와 height 값을 줍니다. 그리고 JS에서는 변수로 만들어 줍니다. ex) const CANVAS_WIDTH = 800; const CANVAS_HEIGHT = 800; canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; canvas의 값을 css와 JS에 둘 다 주는 이유 : css는 canvas의 크기를 지정해주고 JS에는 canvas의 그리기 영역을 지정.. 2022. 7. 23. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
