개요
프론트엔드 개발자로 개발하면서 애플 홈페이지와 같은 인터렉티브한 웹사이트들을 만들고 싶다는 생각을 자주 해보았는데 소스코드를 보니 <canvas> 태그를 이용해서 대부분 구현을 한것을 볼 수 있었다.
그래서 유투브를 찾아보았는데 1분코딩님께서 캔버스 관련해서 강의한 동영상이 있어서 이를 보고 정리를 하고자 한다.
추가적으로 영상에 나오지 않는 궁금한 내용들도 추가적으로 정리했다.
캔버스 란?
MDN의 사이트에서 Canvas API를 보면 아래와 같이 정의 되어있다.
Canvas API는 JavaScript와 HTML
<canvas>엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한
<canvas>엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.
음... 그러니까 웹 그래픽을 처리하기 위해 사용하는 수단이라고 정의 할 수 있다!
사실 웹에서는 SVG와 CANVAS를 통해 그래픽을 그릴 수도 있는데 많은 사이트들을 보면 로고, 이미지는 SVG를 사용하고 애니메이션과 같은 부분은 CANVAS를 통해 많이 구현을 하고있어서 이를 비교해보았다.
SVG와 CANVAS 비교
| SVG | 캔버스 |
|---|---|
| 벡터 기반 이미지 포맷 | 래스터 기반 이미지를 동적으로 렌더링 |
| XML 기반의 마크업 언어로 작성 | JavaScript를 통해 제어 |
| 확대/축소해도 화질이 깨지지 않음 | 확대/축소 시 화질 저하 발생 가능 |
| DOM을 통해 SVG 요소를 제어 가능, CSS 제어 가능 | 픽셀 단위 제어로 복잡한 그래픽/이미지 처리 가능 |
| 정적인 이미지나 정적인 객체를 다룰때 적합(로고, 이미지) | 동적임 그래픽에 적합(게임, 애니메이션 등) |
결론
SVG는 벡터 기반으로 확대/축소가 자유롭고 주로 정적인 CANVAS는 애니메이션, 게임 등의 동적인 렌더링에 유리하다고 한다.
실습
SVG와 CANVAS의 차이점을 알았으니 다시 원점으로 돌아와서 간단하게 캔버스를 그려보자!
브라우저 호환성 체크
실습을 진행할때 첫번째로 체크해야하는 부분이 존재하는데 이는 모든 브라우저가 캔버스를 지원하지 않을 수 있기때문에 캔버스를 지원하는지 체크해주어야 한다. 지원방법은 두가지가 존재한다.
라이브러리 사용
Modernizer 라이브러리를 사용해서 체크해주는 방법이 있다. 공식 사이트에 들어가 Add your detects 버튼을 클릭해 Canvas를 클릭하고 우측 상단 BUILD 버튼을 클릭해 빌드된 파일을 참조해주면 된다.
<html>
<head>
<title>Canvas</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="./modernizr.js"></script>
</head>
<body>
<canvas>이 브라우저는 캔버스를 지원하지 않습니다.</canvas>
<script>
// Canvas 지원 여부 확인
if (Modernizr.canvas) {
console.log("Canvas를 지원하는 브라우저");
}
</script>
</body>
</html>
getContext 사용
자바스크립트를 이용해 canvas태그가 존재유무를 확인하여 확인하는 방법
const canvas = document.querySelector("canvas");
if(canvas.getContext) {
console.log("캔버스 지원");
}캔버스 사이즈 설정
브라우저 호환성을 체크했으면 캔버스의 사이즈를 정하는 방법은 canvas태그를 이용하거나 css를 이용해서 조절하는 방법이 있다.
- 캔버스 태그 선언
canvas 사이즈는 width, height에서 조절함
<canvas class="canvas" width="500" height="300"></canvas>
<canvas class="canvas canvas2" width="1000" height="600"></canvas>- css
css를 통해 캔버스의 사이즈를 조절함
.canvas {
width: 500px;
height: 300px;
background: #eee;
} - 결과
결과를 보면 좌측과 우측의 원의 크기가 다른이유가 있는데 우측의 경우 canvas 태그에서는 width를 1000, height를 600으로 지정했지만 css를 통해서 width를 500, height를 300으로 압축하여 크기를 줄이게 되어 발생한 현상이다.
이는 일반적으로 고해상도를 표시하려고 사용하는 방식이며 canvas 태그를 이용해 2배 사이즈를 만들고 css로 압축시켜 진행하는 방식이라고 한다.
하지만 이런 방식은 고해상도가 되지만 픽셀도 많아지고 연상도 많아지는 단점이 존재하므로 사용하는 서비스에 맞춰서 적용을 해야 한다고 한다.
