하루하루 발전하는 개발자와 블로그🙌🏻 하루하루 발전하는 개발자와 블로그🙌🏻

노마드코더/javascript(바닐라JS 캔버스-초급)

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

  Read More
• 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(단위)에 대해 ..

  Read More
• 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의 한 요소이다. 그 능력들은 이 안에 있는 ..

  Read More
• 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..

  Read More
• 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..

  Read More