✹ 해당 포스팅은 Youtube에 업로드된 1분코딩님의 <HTML5 Canvas 캔버스 라이브 강좌>의 필기입니다.
이 곳을 클릭하시면 유튜브에서 직접 강좌를 들으실 수 있습니다.
대부분의 샘플 코드는 해당 강좌에서 제공되는 코드임을 밝힙니다.
캔버스 사이즈 설정
👩🏻🏫 아래에 크기가 같은 두 캔버스가 있습니다.
그러나 놀랍게도 HTML코드를 살펴보면, 두 캔버스 태그의 크기는 서로 다르게 설정되어 있는 것을 알 수 있습니다.
<canvas class="canvas" width="500" height="300"></canvas>
<canvas class="canvas canvas2" width="1000" height="600"></canvas>그 비밀은 CSS(스타일태그)에 있습니다.
<style>
body {
margin: 0;
}
.canvas {
width: 500px;
height: 300px;
background: #eee;
}
</style>오른쪽 .canvas2와 같은 경우 원래 캔버스의 크기는 1000*600이지만 CSS를 통해 디스플레이를 500*300으로 설정해준 것입니다. 때문에 아래 코드와 같이 top 100, left 100 지점에 반지름50px 짜리 원을 그려주면, 서로 다른 크기의 원이 출력되는 모습을 볼 수 있습니다!
const canvas = document.querySelector('.canvas');
const canvas2 = document.querySelector('.canvas2');
const context = canvas.getContext('2d');
const context2 = canvas2.getContext('2d');
context.arc(100, 100, 50, 0, Math.PI*2, false);
context2.arc(100, 100, 50, 0, Math.PI*2, false);
context.fill();
context2.fill();여기서 중요한 질문 🤹🏻♂️
"이런 걸 왜 할까요? 고해상도 디스플레이에서 고해상도 이미지 표현을 해주기 위함입니다! 요즘에는 디스플레이 자체가 워낙 고해상도이다. 픽셀 집적도가 거의 기존의 2배 이상이 디폴트이기 때문에, 이미지 작업을 할 때도 300px짜리 이미지를 만든다고 하면, 300px로 만들지 않고, 600px로 만든 다음, CSS등으로 절반을 줄여서 표현해준다! 선명하게 표현해주기 위해서! 캔버스도 동일하다."
🕵🏻♀️ 풀스크린으로 캔버스를 다뤄줄 때는 어떻게 고해상도 이미지를 구성할까요?
☝🏻 먼저 자바스크립트로 캔버스의 width와 height를 윈도우 사이즈의 2배로 세팅을 해줍니다.
const canvas = document.querySelector(".canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
const context = canvas.getContext("2d");
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.fill();✌🏻 그리고 나서 CSS에서 캔버스의 width와 height를 100%로 설정합니다.
.canvas {
width: 100%;
height: 100%;
background: #eee;
}
전체 코드
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
}
.canvas {
width: 100%;
height: 100%;
background: #eee;
}
</style>
</head>
<body>
<h1>풀스크린 고해상도 출력하기!</h1>
<canvas class="canvas"></canvas>
<script>
const canvas = document.querySelector(".canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
const context = canvas.getContext("2d");
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.fill();
</script>
</body>
</html>
Modernizr 사용법
Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
캔버스나 SVG, 모쪼록 HTML5부터 지원하는 태그들을 다루다 보면, 오래된 브라우저들의 경우 지원하지 않는 경우도 종종 있다. 때문에 브라우저에서 해당태그 혹은 다양한 피쳐들을 지원하는지 확인해줘야 할 때가 있다! 그럴 때 Modernizr를 소환한다!
일단 모더나이저에 접속한다!
그러고 나서 내브바 > 다운로드를 클릭한다!
아래와 같은 창이 뜨는데 여기서 내가 사용할 것들만 왼쪽의 더하기 연산 기호가 각인된 버튼을 클릭해준다.
모두 클릭해주고 빌드를 클릭하게 되면!
여기서 다운로드를 클릭하면 js 파일이 다운로드 된다!
<script src="./modernizr.js"></script>다운로드한 js파일을 위와 같이 html파일에 스크립트 태그로 삽입해주고 나면 아래와 같은 코드로 지원 여부를 확인할 수 있다!
if (Modernizr.canvas) {
// console.log('Canvas를 지원하는 브라우저');
}