반응형

IT/javascript 24

자바스크립트 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이 참이면 거짓으로 만들..

IT/javascript 2022.11.07

[자바스크립트] 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..

IT/javascript 2022.11.07

자바스크립트 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..

IT/javascript 2022.11.07

자바스크립트 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..

IT/javascript 2022.11.04

[자바스크립트] 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..

IT/javascript 2022.11.03

[자바스크립트] 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..

IT/javascript 2022.11.03

[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..

IT/javascript 2022.11.02

[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 스키마 정의에서 컴파일된 생성자. 모델은 기본..

IT/javascript 2022.09.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..

IT/javascript 2022.09.19

[macOS] MongoDB 설치하기 (유튜브 클론 6.7)

MongoDB document - based 문서기반 데이터베이스 일반적인 데이터베이스는 문서기반이 아닌 sql베이스 (엑셀같은 열과 행) 문서기반 데이터베이스는 데이터베이스를 object처럼 생각함. Json-like-document macOS에 MongoDB 설치하기 mongo.com -> Resources -> Server -> Installation -> Community Edition(무료) -> mac 터미널에 복붙 과정(아래 추가설명) MongoDB 무료버전 Community Edition 설치 과정 (3단계) 차례대로 터미널에 복붙하면 된다. 1. xcode-select --install 2. brew tap mongodb/brew 3. brew install mongodb-communit..

IT/javascript 2022.09.16
반응형