Canvas

주제

---

단순한 도형, 데이터 시각화, 애니메이션, 웹 게임 등의 콘텐츠를 만들 수 있는 방법, canvas를 알아보자

---

Canvas

---

html의 <canvas>태그와 javaScript를 사용하여 다양한 그래픽 요소를 만들 수 있고 나아가 애니메이션, 웹 게임같은 콘텐츠를 만들 수 있는 태그이다.

캔버스 사용법은 태그를 작성하는 것으로 시작된다. 그리고 캔버스 엘리먼트를 DOM으로 조작하는 방식으로 작성된다.

<canvas id="canvas">
  캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시된다. 최신 버전의 주요 브라우저는 모두 지원하지만 옛날 버전이라면 지원하지 않을 수 있다.
</canvas>

태그 속성으로 width, height 연결 해 줄 수 있지만 픽셀로만 인식한다.
<canvas id="canvas" width="50" height="50"></canvas>
// 50픽셀 * 50픽셀
<canvas id="canvas" width="50vw" height="50vh"></canvas>
// 50픽셀 * 50픽셀

DOM으로 설정하는 방법도 있다. 이 경우에 유동적인 값도 설정해줄 수 있다.

const canvas = document.querySelector("#canvas";
cavas.width = 50vw

캔버스에 그래픽 작업을 할 수 있게 해주는 여러 속성과 메소드들이 들어 있는 객체를 불러오면 캔버스를 디자인 할 수 있다

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

getContext

• ctx.fillStyle 사각형 내부 색 지정
• ctx.fillRect 사각형을 그릴 때 사용
• ctx.lineWidth 선의 굵기
• ctx.strokeStyle 선의 색상
• ctx.clearRect 사각형 지우기

캔버스 클릭 이벤트

캔버스를 이용하여 캔버스를 클릭한 위치에서 사각형이나 선등을 그릴수 도 있다.

마우스의 위치를 구하는 이벤트 객체의 속성

• X좌표: event.clientX
• Y좌표: event.clientY
  화면상 캔버스의 위치를 구하는 속성
• X좌표: ctx.canvas.offsetLeft
• Y좌표: ctx.canvas.offsetTop
  혹은 event.offsetX, event.offsetY로 바로 구할 수도 있다.

CSS 애니메이션

css 애니메이션은 여러개의 css스타일을 부드럽게 이어준다. 그 중에서도 @keyframes라는 키워드를 활용하면 좀 더 정밀한 애니메이션을 만들 수 있다.

@keyframes

활용하기 위해서는 우선 cssfh 블록을 만들어야 한다.

@keyfrmes 애니메이션 이름 {
0%{				// from 이라고 작성해도 됨
	css속성: 속성값;
    }
50%{			// 애니메이션의 진행도에 따라 설정 1~99, 소수점까지도 가능
	css속성: 속성값;
    }
100%{			// to라고 작성해도 됨
	css속성: 속성값;
    }
}