Study29 [노마드코더] 바닐라 JS로 그림 만들기 - paint color(1) https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co 이것이 color input임 //app.js const color = document.getElementById("color"); color input으로 색상 바꾸기(addEventListener 추가) //생략 function onColorChange(event) { ctx.strokeStyle = event.target.value; ctx.fillStyle = event.target.value; } //생략 color.addEventListener("change", onColorCh.. 2023. 9. 27. [노마드코더] 바닐라 JS로 그림 만들기 - line width https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co - 차례대로 최솟값, 최대값, 기본값, 단계간 간격 이것이 range input임 //app.js //input값을 가져옴 const lineWidth = document.getElementById("line-width") const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 600; canvas.height = 600; //초기값으로 5를 준다는 뜻 ctx.lin.. 2023. 9. 27. [노마드코더] 바닐라 JS로 그림 만들기 - mouse painting https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co 그림판 구현 1. canvas위에 마우스를 올림 2. 마우스가 있는 곳으로 브러쉬를 움직임(moveTo) 3. 마우스를 누르면 isPainting이 true로(mousedown) 4. 마우스를 누른 채로 움직인다면, 마우스를 누른 곳에서 움직이는 쪽으로 선을 그림 -> 그 선을 stroke 해줌 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 600; canv.. 2023. 9. 26. [노마드코더] 바닐라 JS로 그림 만들기 - painting lines https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co 좌표 찍기 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 600; canvas.height = 600; //event안에 click했을 때의 위치정보(x,y좌표 형식)가 포함되어있음 function onClick(event) { console.log(event); } canvas.addEventListener("click", onClick); - x, y좌표.. 2023. 9. 26. [노마드코더] 바닐라 JS로 그림 만들기 - drawing project(2) https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co 사람 만들기 1. 상체 - 팔 -> (200, 200) 위치와 (400,200) 위치에서 가로 15 세로 100인 직사각형 - 몸 -> (275, 200) 위치에서 가로 60 세로 200인 직사각형 2. 머리 - (305, 130) 위치에서 반지름이 50인 원 - 채우기 3. 경로 끊고 새 경로 시작 4. 눈 - 색상 흰색으로 변경 - (285, 120) 위치에서 반지름이 7인 반원 - (325, 120) 위치에서 반지름인 7인 반원 - 채우기 const canvas = document.q.. 2023. 8. 28. [노마드코더] 바닐라 JS로 그림 만들기 - drawing project(1) https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co 집 만들기 1. 왼쪽 벽 -> (200, 200) 위치에서 가로 50 세로 200인 직사각형 2. 오른쪽 벽 -> (400, 200) 위치에서 가로 50 세로 200인 직사각형 3. 문 -> (300, 300) 위치에서 가로 50 세로 100인 직사각형 4. 천장(지붕과 벽 윗쪽 사이) -> (200, 200) 위치에서 가로 200 세로 20인 직사각형 5. 좌표 이동 -> (200, 200) 위치로 6. 지붕 - (200, 200) 과 (325, 100) 을 선으로 연결 - (325, 1.. 2023. 8. 28. [노마드코더] 바닐라 JS로 그림 만들기 - moveTo and lineTo https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co fillRect() - fill() + rect() - 직사각형을 만들고 색을 채움 rect() - moveTo() + lineTo() moveTo(x, y) - (x, y) 좌표로 이동 - 선을 긋지 않으면서 이동만 해줌 lineTo(x, y) - 마지막 지점에서 (x, y) 좌표만큼 선으로 연결 - 선을 그르면서 이동 //한 변의 길이가 100인 꽉 찬 정사각형 ctx.moveTo(50, 50); // (50, 50)으로 이동 ctx.lineTo(150, 50); // (50, 50)에.. 2023. 8. 25. [노마드코더] 바닐라 JS로 그림 만들기 - paths https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co 사각형 그리기 - 순서 : rect(선그리기) -> stroke(테두리만) / fill(채우기) - 사각형 유 1. 비어있는 정사각형 ctx.rect(50, 50, 100, 100); ctx.stroke() 2. 채워진 정사각형 ctx.rect(50, 50, 100, 100); ctx.fill() => 색깔을 지정하지 않으면 검은색으로 채워진다 3. 빨간색으로 채워진 정사각형 ctx.rect(50, 50, 100, 100); ctx.fillStyle = "red"; ctx.fill() be.. 2023. 8. 24. [노마드코더] 바닐라 JS로 그림 만들기 - canvas api https://nomadcoders.co/javascript-for-beginners-2 바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders Build a Meme Maker nomadcoders.co canvas api - js로 그래픽을 그릴 수 있게 해주는 api -> 브라우저 화면에서 픽셀을 그릴 수 있게 함 - context : 붓(브러쉬) -> 캔버스에 그림을 그릴 때 사용 - getContext() 1. canvas 요소에 대한 렌더링 context 및 관련 그리기 기능을 얻는 데 사용 2. context 유형 -> 2d, bitmaprenderer, webgl, webgl2 (2d를 제외한 나머지는 3d) //app.js const canvas = document.query.. 2023. 8. 24. 이전 1 2 3 4 다음
