Canvas Context 공부

범위

2.1 2D Context ~ 2.2 Recap!

---

 

canvas는 context를 갖고 있는 HTML의 요소이다

context는 이 요소 안에 우리가 픽셀에 접근할 수 있는 방법이다

우리는 그 요소 안에서 픽셀들을 다룰것이다

 

참고:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

 

 

context variable을 만들기

const ctx = canvas.getContext('2d');

2d말고도 다른 타입들도 있다.

 

선 스타일 기본값 변경하기

 

 

Painting 하는 방법

  if (!painting) {
    ctx.beginPath();
    ctx.moveTo(x, y);
  } else {
    ctx.lineTo(x, y);
    ctx.stroke();
  }

이 부분이 조금 이해가 안가서 공부를 더 했다.

!painting: painting이 false인 것이 참이라면

선의 시작 좌표가 설정됨.

근데 계속 이 좌표가 변함

 

그리고 painting값이 true가 되면

끝 좌표가 설정되면서 시작과 끝을 이어주는 선이 생김

lineTo는 다음에 생기는 lineTo를 따라서 계속 선이 이어짐

이 선들은 모여서 우리 눈에는 그림 그리는것처럼 보이는 것임

 

출처: https://kkaesaem.tistory.com/62

이 분 포스트를 보니 조금 이해가 갔다.

 

출처: flffl1231님의 댓글

동영상에 있는 댓글을 보고 ㅇㅋ 이해함

마우스를 움직일때마다 그림을 그릴 수 있는 것은 addEventListener 덕분임.

쏴랑해요~

마우스를 움직일 때마다 변하는 offsetX값과 offsetY값을 가져온 후 그것을 moveTo와 lineTo에 넣어주면 선이 그려짐

 

 

canvas.width = 700;
canvas.height = 700;

 그리고 캔버스 크기를 지정해 줘야지 됨 아니면 안그려짐

canvas.width = document.getElementsByClassName("canvas")[0].offsetWidth;

여기서 [0]이 뭘 의미하는지 모르겠음...

slack 짱

오우 감사합니다

여기서 이 값을 가져오는 것이었음

 

 

NOTE

mouseup에 stopPainting 안준다고 했는데 줌...

니꼬쌤: 이게 좋은 방법이라고 생각되지는 않지만 일단 바꿔주쟈

왜냐하면 line logic을 넣지 않아도 되니까