반응형 IT/javascript24 자바스크립트 canvas 배경 채우기 기능 추가 / recFill() 활용 / recFill(x, y, width, height) / javas 그림판의 필수 기능인 배경 채우기. recFill로 만들 수 있다. 버튼을 추가해 선 드로잉 모드 / 배경 채우기 모드 두가지를 선택할 수 있게했고 원하는 색상으로 배경이 채워진다. index.html 추가된 버튼 태그. 딱 이 한줄 추가되었다. Fill index.html의 전체코드 Fill app.js 추가된 코드 const modeBtn = document.getElementById("mode-btn"); /** 선그리기, 배경채우기 변경 버튼 지정 */ let isFilling = false; /** 선그리기, 배경채우기 / false에서 true값으로 변경시킬 것이므로 let */ function onclickMode(){ /** 선그리기, 배경채우기 - isFilling이 참이면 거짓으로 만들.. 2022. 11. 7. [자바스크립트] canvas 그림판 만들기 / 색상 보기 만들기 / 선 색상 변경 기능 이번에는 그림판에 정해진 색상을 보기로 제공하여 그 안에서 변경할 수 있도록 하는 기능이다. 무슨 말인지 헷갈리다면 아래 첨부된 그림판 만들기 이전글을 참고한다. 그림판 만들기 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth.. 2022. 11. 7. 자바스크립트 canvas 그림판 만들기 / 색상 변경 기능 / 색상바 만들기 선 색상을 변경하는 기능으로 다양한 색상을 직접 선택하거나 스포이드로 원하는 색상을 따서 변경할 수 있다. 그림판 만들기 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, stroke() 2022.11.. 2022. 11. 7. 자바스크립트 canvas 그림판 만들기. 마우스 클릭시 선 긋기 moveTo, lineTo, stroke, offsetX, offsetY 이제 드디어 그림판의 가장 기본인 기능. 마우스 왼쪽 클릭시 선이 그어지는 기능을 구현한다. 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, stroke() html과 css는 이전글과 동일. app.. 2022. 11. 4. [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, 이전단계 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 canvas 엘리먼트는 javascript에 그래픽을 그릴 수 있는 API다. 사용방법은 간단하다. html에는 라고 작성하는 게 끝. 그 다음 그래픽을 그리기 위한 모든 작업은 javascript에서 canvas 엘리먼트에 접근한 rootingforme.tistory.com 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS.. 2022. 11. 3. [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 ctx.rect()도 shorcut function 이었다. rect보다 더 기본적인 기능인 moveTo와 lineTo를 활용해서 사각형을 그릴 수 있다. 그림판으로 그림을 만들려면 가장 작은 단위의 함수를 사용해야한다. moveTo(x, y): 브러쉬를 단순 이동 시켜준다. lineTo(x, y): 선을 그으며 이동한다. *다만 stroke()나 fill()을 사용해야만 선이 나타나거나 윤곽이 보인다. html과 css 코드는 이전 글과 같다. 아래 링크참조. 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / ca.. 2022. 11. 3. [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 canvas 엘리먼트는 javascript에 그래픽을 그릴 수 있는 API다. 사용방법은 간단하다. html에는 라고 작성하는 게 끝. 그 다음 그래픽을 그리기 위한 모든 작업은 javascript에서 canvas 엘리먼트에 접근한 후 이루어진다. index.html styles.css body { display: flex; justify-content: center; align-items: center; } canvas { width: 800px; height: 800px; border: 5px solid black; display: flex; justify-content: end; } #1.2 사각형을 그리기 위한 단계 사각형 테두리 그리기: ctx.rec(x, y, with, height); ctx.. 2022. 11. 2. [mongoose] Schema 스키마, Model 이란? 스키마와 모델 작성하기 (유튜브 클론 6.9, 6.10) Schema 스키마 Mongoose v6.6.1: Schemas If you haven't yet done so, please take a minute to read the quickstart to get an idea of how Mongoose works. If you are migrating from 5.x to 6.x please take a moment to read the migration guide. Everything in Mongoose starts with a Schema. Each schema ma mongoosejs.com 데이터베이스를 매핑하는데 사용되는 정보(문서)의 형식을 정의한다. 몽구스의 모든 것은 스키마로 시작한다. Model 스키마 정의에서 컴파일된 생성자. 모델은 기본.. 2022. 9. 20. mongoose 몽구스 설치하고 DB연결하기. (유튜브 클론 6.8) mongoose란 javascript 언어로 mongodb를 사용할 수 있도록 javascript를 변환해 주는 라이브러리다. 몽고DB와 Express.js 웹 애플리케이션 프레임워크 간 연결을 생성한다. 결론은 mongodb를 좀더 편하게 사용하려면 설치해줘야한다. 이전단계 > MongoDB 를 아직 설치하지 않았다면. 2022.09.16 - [IT/개발] - [macOS] MongoDB 설치하기 (유튜브 클론 6.7) [macOS] MongoDB 설치하기 (유튜브 클론 6.7) MongoDB document - based 문서기반 데이터베이스 일반적인 데이터베이스는 문서기반이 아닌 sql베이스 (엑셀같은 열과 행) 문서기반 데이터베이스는 데이터베이스를 object처럼 생각함. Json-like-doc.. 2022. 9. 19. 이전 1 2 3 다음 반응형
