Canvas

이번 포스팅에서는 Canvas에 대해서 대략적인 내용을 공부하고
이를 통해 사각형을 만들어 볼 예정입니다. 

 

canvas란?

• HTML 의 태그로, JS를 이용해서 다양한 그래픽 요소를 만들 수 있다. 

 

사용법?

1. DOM 조작이 필요함으로 id 작성이 필요하다. 

2. 크기와 높이 설정
-> 설정하지 않으면 기본 300px*150px

<설정방법>

• 태그 속성 이용 (픽셀만 가능)

<canvas id="canvas" width="500" height="500"></canvas>

• DOM 설정 (유동적 값 가능)

canvas.width = 50vw;
canvas.height = 40vh;
	// 50vw * 40vh 로 설정됩니다.

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

3. 캔버스에 그래픽 작업을 할 수 있는 속성과 매소드들이 포함된 객체 불러오기 

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

 

Step 1 : Canvas로 사각형 그리기 

<색칠된 사각형 그리기>

1. fillStyle 속성으로 사각형 내부를 색칠할 색상 설정

ctx.fillStyle = 'blue'

2. fillRect 이용해 사각형 그리기 (x좌표, y좌표, 가로길이, 세로길이)

ctx.fillRext = (10, 10, 100, 50)

 

<선으로된 사각형 그리기>

1. lineWidth 속성으로 선의 굴기를, strokeStyle 속성으로 선의 색상 설정

ctx.lineWidth = 5;
ctx.strokeStyle = "black";

2. strokeReck 메소드를 사용해 사각형 그리기(x좌표, y좌표, 가로길이, 세로길이)

ctx.strokeRect(10, 10, 100, 50)

 

<사각형으로 지우기>

1. clearRect 메소드로 지울 범위 설정

ctx.clearRect( 20, 20, 80, 30)

 

추가 공부 링크 

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

캔버스(canvas)를 이용한 도형 그리기 - Web API | MDN

 

Canvas로 클릭이벤트 만들기

<클릭 위치에 사각형 그리기>

1. 클릭하는 위치 찾기

• 화면 내 마우스 위치 - 화면 내 캔버스 위치
  = (event.clientX, event.clientY) - (ctx.canvas.offsetLeft, ctx, canvas.offsetTop)
• 또는 (event.offsetX, event.offsetY)
  
  

2. 좌표에 사각형 그리기

canvas.onclick = function (event) {
	const x = event.clientX - ctx.canvas.offsetLeft
	const y = event.clientY - ctx.canvas.offsetTop
		// x, y 변수에 방금 구한 좌표를 할당해줍니다.

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

 

<추가>

그림판만들기 등 애니메이션, 데이터 시각화, 웹 게임 개발 등 다양한 곳에서 사용가능