본문 바로가기

그림판 만들기12

[바닐라JS로 그림판 만들기] Saving the Image [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/xOxE40I75GM 이미지를 저장하는 것을 해 보자! 우선 canvas의 배경색을 지정해주자. (배경색을 지정해주지않으면 배경이 투명하게 나옴) ctx.fillStyle = "white"; ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); 만약에 이미지를 저장하고싶지않다면 이렇게 하면 된다. 추가할 것▼ function handleCM(event) { event.preventDefault(); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); canvas.addEventListener("mousedown", startPai.. 2021. 4. 28.

[바닐라JS로 그림판 만들기] Filling Mode [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/2m_WnYeI1pA Fill 버튼을 누르고 색상을 선택한 후 canvas를 클릭하면 그 색상으로 canvas가 채워지는 것을 할 것이다. fillRect() width와 height에 의해서 결정된 사이즈로 (x, y) 위치에 색칠된 사각형을 그림. 추가할 것▼ ctx.fillRect(50, 20, 100, 49); // x, y, width, height app.js const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContext("2d"); const colors = document.getElementsByClassName("jsColo.. 2021. 4. 27.

[바닐라JS로 그림판 만들기] Brush Size [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/j4cAIJutjVI 다음 단계로는 jsRange 아이디를 추가하는게 필요하다. 추가할 것▼ const range = document.getElementById("jsRange"); // range 이벤트는 input에 반응할 것이다. if(range) { range.addEventListener("input", handleRangeChange); } function handleRangeChange(event) { console.log(event); } app.js const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContext("2d"); .. 2021. 4. 27.

[바닐라JS로 그림판 만들기] Changing Color [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/cq-l2zPUVoU Recap 후에 우리가 할 일은 색상을 바꾸는 것이다. index.html app.js const colors = document.getElementsByClassName("jsColor"); console.log(Array.from(colors)); 깜빡하고 closePath()를 안지움.... function handleColorClick(event) { console.log(event.target.style); } Array.from(colors).forEach(color => color.addEventListener("click", handleColorClick) ); 좀 더 다듬어보자. fun.. 2021. 4. 27.

[바닐라JS로 그림판 만들기] Recap! [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/LAG1ERXR2xQ 이전 강의에서 프로그램이 작동이 안된건 canvas에 사이즈를 안줘서 그런 것 같다. canvas element는 두 개의 사이즈를 가져야 한다. CSS 사이즈와 웹브라우저 상의 사이즈. 이 element에 width, height를 지정해줘야 한다. canvas.width = 700; canvas.height = 700; const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContext("2d"); canvas.width = 700; canvas.height = 700; ctx.strokeStyle = "#2c2c2c";.. 2021. 4. 27.

[바닐라JS로 그림판 만들기] 2D Context [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/IlANstQ1h3M MDN을 통해서 canvas에 대해 배워보자! 필요한건 이 사이트에 다 있다. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D CanvasRenderingContext2D - Web APIs | MDN CanvasRenderingContext2D The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for draw.. 2021. 4. 25.

이전 1 2 다음

티스토리툴바