Coding Archive

canvas drawing mode변경하기(fill/draw) 기본 상태는 draw 상태지만 fill 버튼을 누르면 canvas에 색을 채울 수 있도록 만들어 봤습니다. 1 . html 요소 선택, 접근하기 1 const modeBtn = document.querySelector(".modeBtn"); cs querySelector를 사용해 원하는 html 요소를 찾습니다. 2 . 버튼에 클릭 이벤트 주기 / 모드 변환 함수 구현하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const modeBtn = document.querySelector(".modeBtn"); let filling = false; function onModeClick() { if (!filling) { ..

canvas js로 구현하기 앞서 배운 내용을 바탕으로 js에서 그리기 함수를 만들어 canvas를 구현해 보았습니다. · html / css html에서 id가 canvas인 canvas 태그를 생성합니다. 1 cs 원하는 디자인대로 css를 작성합니다. 1 2 3 4 5 6 7 8 #canvas { height: 700px; width: 1000px; background-color: white; border-radius: 50px; box-shadow: var(--box-shadow); margin: 0 30px; } Colored by Color Scripter cs · js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const canvas = docume..

2D Context canvas는 context를 갖고 있는 html 요소로, context는 canvas 안에서 픽셀을 다루는 것입니다. context를 사용하기 위해서는 canvas는 getContext() 메서드가 필요하고, 이 메서드를 통해 canvas에 그림을 그릴 수 있습니다. 2d 그래픽의 경우 "2d"를 넣어줍니다. 1 const ctx = canvas.getContext("2d"); cs canvas 크기 설정 canvas 크기 설정은 css에서 지정한 것과 별도로 다시 지정해줘야 합니다. 1 2 canvas.width = 700; canvas.height = 700; cs * 이렇게 따로 지정하는 일이 없도록 하기 위해＜canvas id="jsCanvas" width="700" heig..

range slider css 변경하기 input 태그의 type속성 중 range의 css를 변경해보았습니다. 먼저 html에서 가장 기본적인 형태를 만들었을 때는 이런 형태의 range slider가 만들어집니다. 1 cs html에서 기본적인 속성들은 조절 가능합니다. (최댓값, 최솟값, 기본값, 조절 값 등) 1 2 3 4 5 6 7 8 cs 그 후 css에서 원하는 모양대로 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 /** slider **/ input[type=range] { -webkit-appearance: none; background-color: #e0e0e0; opacity: 0.8; border-radius: 7...

2. Recap! - path는 canvas 안에서 마우스를 움직이는 동안 좌표를 만들고 있지만, 클릭 전까지 painting은 false이므로 보이지 않는다. - painting의 기본 값은 false이고, 마우스가 클릭되면 startPainting을 통해 true가 된다. 그렇기 때문에 !painting은 false이고, else 안의 lineTo()와 stroke()를 통해 선이 그려지게 된다. +) if(painting === false) = if(!painting) !painting 은 !false (true)를 의미하면서 if(true){}인 것과 같이 if문을 실행 - canvas 선 그리기 ctx.beginPath(); //새로운 경로 생성 ctx.moveTo(x, y); //선 시작 좌표..

#1 SETUP + STYLES 0. Project Setup github 계정에 들어가서 새로운 repository를 만든다. 이때 initialize this repository with에서 "Add a README file"을 체크, gitignore은 "node"넣어준다. (Add .gitignore에서 .gitignore template: node로 바꿔준다.) 저장할 공간을 터미널에서 열어서 git clone https://github.com/seoye0ng/paint-js(생성된 repository 주소)를 입력하고 깃 클론하면 된다. → 내가 저장할 공간에 paint-js파일이 생성된다. 파일을 vsc에서 열고 html, css, js문서를 만들어 준다. 1. Styles part One ..

CLONING TIME 0. Branches on Git 가지를 쳐서 새로운 코드를 시도해볼 수 있고, 다시 원래 만들던 코드와 합칠 수도 있다. 1. Publishing on Github Pages github에서 공개적으로 웹사이트를 올릴려면 1. public 저장소이고, 2. gh-pages라는 branch가 있어야 한다. 3. 꼭 push를 눌러야 한다. 웹사이트를 확인하려면 1. github에서 해당 repository로 들어가서 오른쪽에 environments에서 github-pages 클릭해서 확인 2. https://seoye0ng.github.io/kokoa-clone-2022/ (username.github.io/저장소 이름)을 직접 입력해서 확인 2. Updating Github Pa..

CLONING TIME 33. Write Message Input reply 창 만들기 2개의 column으로 구성 ▶첫 번째는 플러스 아이콘 ▶두 번째는 인풋, 이모지, 버튼 이때 두 번째 column의 input의 width를 넓혀주기 위해서는 부모인 두 column과 reply에 width를 주어야 한다. 두 번째 column에서 이모지와 버튼을 옮기기 위해 position: absolute; 를 사용한다. +) 너비 부분이 있어서 100%라고 말했기 때문에 부모 컨테이너에 너비가 필요했지만 300px 또는 500px와 같이 수동으로 입력 너비를 설정하면 부모 컨테이너 너비를 설정할 필요가 없다. 34. Splash Screen part One 100vh는 화면 높이의 100%, 100vw는 화면 ..