canvas는 웹에서 직접 그림을 그리거나 표시할 수 있도록 HTML5에 도입된 그래픽 요소로, 자바스크립트 프로그램을 통해 무엇인가를 그리거나 색상을 칠할 수 있습니다. 이렇게 웹 상에 그림을 그릴 수 있게 해주는 기능들은 Canvas API에 모두 모여 있죠.
<canvas> 태그
<canvas> 태그는 웹 페이지에서 그래픽을 제어할 수 있는 캔버스 영역을 지정합니다. 캔버스 영역에서는 그림을 그릴 수 있을 뿐 아니라 이미지나 동영상을 불러와서 조작할 수도 있습니다.
<canvas> 태그만 사용하면 브라우저에서 기본으로 지정한 크기만큼 만들어지고, width와 height 속성을 사용하면 캔버스 크기를 직접 지정할 수 있습니다
<div>
<h2>크기를 지정하지 않을 때</h2>
<canvas></canvas>
</div>
<div>
<h2>크기를 지정했을 때 400*300</h2>
<canvas width="400" height="300"></canvas>
</div>화면 전체를 캔버스로 사용하기
화면 전체를 캔버스로 사용하려면 캔버스의 너비와 높이를 열려 있는 브라우저 창의 너비(window.innerWidth)와 높이(window.innerHeight)에 맞게 지정하면 됩니다.
그런데 웹 브라우저에는 margin 기본값이 있기 때문에 브라우저 창 테두리와 캔버스 영역 사이에 약간의 여백이 생깁니다. 그리고 스크롤 막대도 생기죠. 여백을 없애려면 스타일시트에서 문서 전체의 기본 margin 값을 0으로 지정하면 되고, 스크롤 막대를 없애려면 문서 전체의 스타일에 overflow:hidden을 추가하면 됩니다.
<head>
<style>
body {
margin:0; // 기본 마진값 없애기
overflow:hidden; // 스크롤 막대 없애기
}
canvas {
background-color:#ccc;
}
</style>
</head>
<body>
<script>
const canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
</script>
</body>getContext 메서드
웹 문서에 canvas 요소를 추가했지만 이것은 단지 영역만 만들어 준 것이라서 비어 있는 상태입니다. 이제부터 캔버스에서 무엇인가를 하려면 렌더링 컨텍스트(rendering context)를 만들고, 자바스크립트를 사용해서 렌더링 컨텍스트를 조작해야 합니다.
캔버스에서 렌더링 컨텍스트를 만드는 메서드가 getContext() 메서드인데, 캔버스에서는 2차원 컨텍스트만 다룹니다.
const canvas = document.querySelector('canvas'); // 캔버스 영역 가져오기
const ctx = canvas.getContext("2d"); // 2차원 컨텍스트 생성하기
사각형 그리기
캔버스 API에는 사각형을 그릴 때 필요한 메서드와 속성을 제공합니다.
사각형을 그리는 메서드
- fillRect(x, y, width, height) : (x, y) 위치부터 시작해서 지정한 너비와 높이를 가진, 색이 채워진 사각형을 그립니다. 색상을 지정하지 않으면 검정색으로 채웁니다.
- strokeRect(x, y, width, height) : (x, y) 위치부터 시작해서 지정한 너비와 높이를 가진, 테두리만 있는 사각형을 그립니다. 선 색을 지정하지 않으면 검정색 선을 사용합니다.
- clearRect(x, y, width, height) : (x, y) 위치부터 시작해서 지정한 너비와 높이만큼 사각 영역을 지웁니다.
채우기 색상과 선 색상 지정하기
여러 가지 도형을 그릴 때 채울 색상이나 선 색을 지정하는 속성이 준비되어 있습니다. 이 때 색상 값은 색상 이름이나 rgb/rgba, 16진수값 등 모두 사용할 수 있습니다.
- fillStyle = "색상" : 도형을 채우는 색상을 지정합니다.
- strokeStyle = "색상" : 도형의 선 색상을 지정합니다.
'javascript' 카테고리의 다른 글
| [Typescript] 클래스 선언 및 인스턴스화 (2) | 2024.02.07 |
|---|---|
| [Typescript] 형식화된 함수 개발 (0) | 2024.02.07 |
| [Typescript] 인터페이스 구현하기 (0) | 2024.02.07 |
| 캔버스 기본 도형 그리기 - 사각형 외 (0) | 2023.02.15 |
| 2023년부터는 나이가 줄어든다? - 만 나이 계산하기 (0) | 2023.02.09 |
