노마드코더
-
filling mode노마드코더/javascript(바닐라JS 캔버스-초급) 2020. 5. 17. 19:20
filling mode를 만들어보자. 그 전에 canvas documentation을 살펴보자. https://developer.mozilla.org/ko/docs/Web/API/CanvasRenderingContext2D CanvasRenderingContext2D The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a canvas element. It is used for drawing shapes, text, images, and other objects. developer.mozilla.org 우리가 원하는 방법을, .fillR..
-
Brush Size노마드코더/javascript(바닐라JS 캔버스-초급) 2020. 5. 17. 18:47
자, 다음 단계는 이 jsRange 아이디를 추가하는게 필요하다. const range = document.getElementById("jsRange"); function handleRangeChange(event) { console.log(event); } if (range) { range.addEventListener("input", handleRangeChange); } 위와 같은 코드를 작성해서 const range가 잘 동작하는지 확인할 필요가 있다. 콘솔에 출력이 되는지 확인하고, target을 확인해보자. event.value값. 바로 우리가 원하는 것이다. 브러시 range의 value값에 따라 브러시 크기가 변해야 하기 때문이다. 전에 최소, 최대 사이즈 그리고 steps(단위)에 대해 ..
-
recap!노마드코더/javascript(바닐라JS 캔버스-초급) 2020. 5. 17. 17:04
이전 글 상태에서 코드가 동작되지 않았던 것은, (그림이그려지지 않았던 것은) 캔버스에 사이즈를 주지 않아서이다. canvas element는 두개의 사이즈를 가져야한다. css사이즈랑, pixel manipulating 사이즈. 기본적으로 우리는 css로 캔버스를 만든다. pixel을 다룰 수 있는 element로서 만드는 것이기 때문에. 이 element에 width와 height를 지정해줘야한다. 그래서 여기에 그걸 적을 것이다. canvas.width = 700; canvas.height = 700; 이제 캔버스에 그림이 그려진다!! 우리가 실제 픽셀 사이즈를 안줘서 그런것이었다. 다시 복습해보자면, canvas는 어마어마한 능력을 갖고 있는 html5의 한 요소이다. 그 능력들은 이 안에 있는 ..
-
2D context노마드코더/javascript(바닐라JS 캔버스-초급) 2020. 5. 17. 16:04
canvas 태그는 html의 한 요소인데, 다른 점은 context를 갖는다는 것이다. context라는 건 이 요소 안에서 우리가 픽셀에 접근할 수 있는 방법이다. 이론 적으로는 이 안에 있는 픽셀들인 것이다. 매우 쉽게 이 context를 만들 수 있는데, 아래와 같이 context variable을 만들면 된다. cosnt ctx = canvas.getContext('2d'); 2d뿐 아니라 많은 context가 있다. 3d.. 등등 그리고 나면 내가 할 수 있는 context는 모두 갖게 된다. context로 라인도 그릴수 있고, 사각형, 색이 칠해진 사각형 등등 할 수 있다. ** path는 line을 시작하는 것이다. 하지만 painting을 할때엔 path가 필요하진 않다. paintin..
-
canvas event노마드코더/javascript(바닐라JS 캔버스-초급) 2020. 5. 17. 12:27
캔버스 위에 마우스가 있으면 그것을 감지하게 하는 방법. const canvas = document.getElementById("jsCanvas"); let painting = false; function stopPainting(event) { painting = false; } function noMouseMove(event) { const x = event.offsetX; const y = event.offsetY; /* 콘솔에 찍히는 좌표중, clientX,Y와 offsetX,Y가 있는데, clientX,Y는 윈도우 화면에서의 좌표이고, offsetX,Y는 캔버스 위에서의 좌표이다. 고로, 우리가 필요한 것은 offsetX,Y. */ } function onMouseDown(event) { pain..
-
#1.3 Hello world노마드코더/javascript(바닐라JS 크롬웹-초급) 2020. 4. 20. 14:59
alert으로 hello world를 띄어보자! css는 아래와 같이 head에 링크를 건다. 그러나 JS는 body태그 안에 아래와 같이 연결하여 사용한다. This works! 그리고 index.js 파일에는 아래와 같이 작성한다. alert('hello world'); 보는 것처럼 HTML, CSS에 JS 파일을 추가하는 것은 매우 쉽고 심플하다. 심플한 이유는, 모든 웹브라우저에는 JS가 설치되어 있기때문이다. 보통 SW제품을 만들 때 Haskell이라는 언어를 사용했다고 가정하면, sw가 만들어졌고, 내가 오픈을 해야할때 언어마다 다르지만 가끔씩 Haskell을 설치해야할 때가 있다. 그러나 JS 같은 경우에는 아무도 다운로드를 하지 않아도 된다. 브라우저랑 같이 이미 구성되어 있기 때문에! 그..
-
#1.2 ES5, ES6 ES?! and JS노마드코더/html+css (카카오클론-초급) 2020. 4. 20. 14:58
JavaScript Version과 자바스크립트를 배우는 이유 자바스크립트의 ECMA. 자바스크립트는 꽤나 중앙 집중화되어있어서 누가 업데이트를 하면 모든 브라우저에서 작동을 하게된다. ES… 는 JavaScript의 Specification인데 체계 매뉴얼 같은것이다. 브라우저는 무슨일을 하냐면, 구글크롬이랑 Firefox도 이 Specification을 받아서 자기들 방식으로 실행한다. ES5, ES6같은 경우는 Specification의 버전을 나타내주는 것이다. 바닐라자바스크립트는 Javascript의 한 종류로 라이브러리가 없는 자바스크립트를 말한다. 화장이 없는 JavaScript인 것이다. 도움이 없는 JavaScript. 왜 우리는 바닐라 자바스크립트를 먼저 배워야 하는가?! JavaScr..
-
#1.1 Why JS.md노마드코더/javascript(바닐라JS 크롬웹-초급) 2020. 4. 20. 14:54
왜 JS 인가? JavaScript는 웹에 쓰이는 하나뿐인 프로그래밍 언어이다. 하나뿐이라고 하는 이유는 옵션이 하나뿐이기 때문이다. 웹에서 웹사이트를 만들고 싶을때, 웹사이트를 interactive하게 만들고 싶을때, 바로 자바스크립트이다. 자바스크립트가 웹에서 사용할 수 있는 유일한 언어이기에 점점 업데이트되고 강력해지고 있다. 왜 이 언어를 사람들이 좋아하고 싫어하는지, 그리고 왜 이 언어가 너의 시간을 투자할 가치가 있는지도 이제 설명되어질 것이다. 자바스크립트를 배우면 매우 섹시한 웹사이트나 웹앱, 비디오게임, Native Application도 만들어 낼 수 있다. vscode나 atom도 JS로 만들어진 데스크톱 어플리케이션이다. https://impactjs.com/모두 자바스크립트로 만들..