Canvas

html의 canvas태그와 js를 사용하면 다양한 그래픽 요소를 만들 수 있다.

• 단순한 도형 그리기
• 데이터 시각화
• 애니메이션
• 웹 게임

캔버스 사용법

1. 캔버스 태그 작성
2. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성
3. 따라서, 엘리먼트를 선택할 때 사용할 id를 작성하는 것이 좋다.

 <canvas id="아이디">
   </canvas>

const canvas = document.querySelector("#canvas"); 

너비, 높이 설정

기본 값 300픽셀 * 150픽셀 사이즈로 생성

1) 태그 속성으로 설정하는 방법

• width, height 속성으로 설정
• 픽셀 단위로만 인식

  	<canvas id="canvas" width="500" height="500"></canvas>
  // 500픽셀 * 500픽셀로 설정
  	<canvas id="canvas" width="50vw" height="40vh"></canvas>
  // vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정

2) DOM으로 설정하는 방법 
- 유동적인 값을 설정할 수 있음 => 캔버스 크기 고정되지 않은 경우에 쓰면 좋다. 
- 원하는 단위로 값 지정 가능 
```js
 canvas.width = 50vw; 
 canvas.height = 40vh; 
// DOM으로 설정하면 50vw * 40vh 로 단위값을 지정해도 됨

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight; 
// 화면 크기에 맞춰서 설정해줄 수도 있습니다.

해당 속성과 메소드는 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

활용예시

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas.onclick = function (event) {
  const x = event.clientX - ctx.canvas.offsetLeft;
  const y = event.clientY - ctx.canvas.offsetTop;

  ctx.fillRect(x - 15, y - 15, 30, 30);
};

색칠된 사각형 그리기

 ctx.fillStyle = 'blue' //사각형 내부 색상 
 ctx.fillRext = (10, 10, 100, 50) //x좌표, y좌표, 가로길이, 세로길이 

선으로만 그리기

 ctx.lineWidth = 5; // 선 굴기 
 ctx.strokeStyle = "black"; // 선의 색상 
 ctx.strokeRect(10,10,100,50) // 사각형을 그려보겠어 x좌표, y좌표, 가로길이, 세로길이 

사각형으로 지우기

	ctx.clearRect(20,20,80,30) // 그려놓은 사각형 가운데 부분 지운다.

캔버스로 클릭이벤트 만들기

캔버스를 클릭하면 클릭하는 위치에 사각형을 그리는 이벤트를 만들어보자.

1) 화면상 마우스 위치를 구하는 이벤트 객체 속성

• x좌표: event.clientX
• y좌표: event.clientY

2) 화면상 캔버스의 위치를 구하는 속성

• x좌표: ctx.canvas.offsetLeft
• y좌표: cts.canvas.offsetTop

3) event.offsetX, event.offsetY 로 바로 구할 수도 있다.

 canvas.onclick = function(){
 	const x = event.clientX - ctx.canvas.offsetLeft
    const y = event.clientY - ctx.canvas.offsetTop
    
    ctx.fillRect(x-15, y-15, 30, 30); 
  // 클릭할 때마다 30픽셀*30픽셀 크기의 사각형을 그리려고 한다. 
  // 이 때, x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작되어 어색한 느낌
  // 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 빼
  // 따라서 x - 15, y - 15 를 전달
 }