[HTML/CSS] 심화
Canvas(캔버스)
HTML의 canvas 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있습니다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등 사용하기에 따라 무궁무진한 콘텐츠를 만들어낼 수 있습니다.
기본적인 캔버스 사용법부터 알아보겠습니다. 일단은 캔버스 태그를 작성하는 것으로 시작됩니다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성됩니다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋습니다.
<canvas id="canvas">
캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다.
</canvas>
//자바스크립트를 사용해서 엘리먼트를 선택
const canvas = document.querySelector("#canvas");캔버스를 본격적으로 다루기 전에, 너비와 높이를 설정해주어야 합니다. 크기를 설정해주지 않으면 기본적으로 300픽셀 * 150픽셀의 사이즈로 생성됩니다.
크기 설정 방법
첫 번째 방법은 canvas의 태그 속성으로 너비와 높이를 설정해주는 것입니다. 각각 width, height 속성으로 설정해줄 수 있습니다.
<canvas id="canvas" width="500" height="500"></canvas>이렇게 숫자만 넣으면 알아서 픽셀 단위로 인식하여 500px * 500px 로 설정이 됩니다. 그러나 개발을 하다보면 vw, vh 등 다른 단위로 설정을 하고 싶을 때가 있습니다.
<canvas id="canvas" width="50vw" height="40vh"></canvas>
// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정됩니다.이번에는 vw, vh 단위를 이용하여 너비를 설정을 했습니다. 예상대로 vw, vh로 단위를 설정했기 때문에 너비 단위 설정이 되었을 것이라 생각이 들겠지만, 50픽셀 * 40픽셀로 설정됩니다.
왜냐하면 캔버스 요소의 width, height 속성은 픽셀 단위로만 명시해야 인식하도록 되어 있기 때문에 어떤 단위로 속성 값을 설정해주든 픽셀로만 인식하기 때문입니다.
두 번째 방법은 DOM으로 설정하는 것입니다. 이 경우는 유동적인 값도 설정해줄 수 있기 때문에 캔버스의 크기가 고정되어있지 않은 경우에 사용하기 좋습니다. 이 경우에는 원하는 단위로 값을 지정해서 명시할 수 있기 때문에 태그 속성으로 설정해주는 것과 차이가 있습니다.
// 화면 크기에 맞춰서 설정해줄 수도 있습니다.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 화면 크기를 가져와 그에 비례하여 설정해줄 수도 있습니다.
canvas.width = window.innerWidth * 0.5;
canvas.height = window.innerHeight * 0.4;
// DOM으로 설정할 시, 픽셀 단위가 아닌 vw, vh로 단위값을 지정해도 설정이 됩니다.
// 주의해야 할 점은 style 속성을 이용하여 크기에 변화를 주는 경우는 픽셀의 크기까지 해당 단위에 비례해 확대하는 개념이므로,
// 특정한 경우가 아니면 사용을 자제합니다.
canvas.style.width = "50vw";
canvas.style.height = "40vh";
캔버스로 사각형 그리기
색칠된 사각형 그리기
fillStyle 속성으로 사각형 내부를 색칠할 색상을 설정해줍니다.
ctx.fillStyle = 'blue'fillRect 메소드를 사용해 사각형을 그려줍니다.
ctx.fillRext = (10, 10, 100, 50)
//전달 인자는 순서대로 x좌표, y좌표, 가로길이, 세로길이 입니다.선으로만 그리기
lineWidth 속성으로 선의 굵기를, strokeStyle 속성으로 선의 색상을 설정해줍니다.
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
strokeRect 메소드를 사용해 사각형을 그려줍니다.ctx.strokeRect(10, 10, 100, 50)
//전달 인자는 이번에도 순서대로 x좌표, y좌표, 가로길이, 세로길이 입니다.
//위에서 그려준 색칠된 사각형 바로 위에 그려보세요.사각형으로 지우기
clearRect 메소드로 지울 범위를 설정해줍니다.
ctx.clearRect( 20, 20, 80, 30)
// 전달 인자는 역시 동일합니다. 그려놓은 사각형 가운데 부분을 지워보세요.캔버스로 클릭이벤트 만들기
이번에는 캔버스로 사각형을 그리는 방법을 이용해서, 캔버스를 클릭하면 클릭하는 위치에 사각형을 그리는 이벤트를 만들어봅시다.
우선 클릭이벤트가 일어날 때의 마우스의 위치를 구해봅시다.
클릭할 때 캔버스 위에서의 마우스 위치를 구하려면, 화면에서의 마우스 위치에서 화면에서의 캔버스 위치를 빼면 됩니다.
화면상 마우스 위치를 구하는 이벤트 객체의 속성
X좌표 : event.clientX
Y좌표 : event.clientY
화면상 캔버스의 위치를 구하는 속성
X좌표 : ctx.canvas.offsetLeft
Y좌표 : ctx.canvas.offsetTop
혹은 event.offsetX , event.offsetY 로 바로 구할 수도 있습니다.
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);
// 클릭할 때마다 30픽셀*30픽셀 크기의 사각형을 그리도록 하려고 합니다.
// 이 때, x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작되어 어색한 느낌을 줍니다.
// 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 빼주면 됩니다.
// 따라서 x - 15, y - 15 를 전달합니다.
}완성 코드
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<canvas id="canvas" width="200" height="150"></canvas>
<script src="src/index.js"></script>
</body>
</html>//index.js
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);
};