# HTML Canvas란?
1. canvas는 html문서 내부에 그림을 그릴 수 있는 일종의 '컨테이너' 엘리먼트다.
2. 자바스크립트를 통해 그림을 그리고 애니메이션과 이벤트 처리 등을 구현할 수 있다.
# canvas 사용 방법
1. html 문서에 canvas 엘리먼트를 선언한다.
2. canvas 엘리먼트에 id 속성을 설정한다.
3. canvas 태그 내부에 width, height를 설정한다.
4. canvas 내장 '그리기 객체'를 취득한다.
5. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다.
6. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다.
7. 자바스크립트를 통해 다양한 효과를 구현한다.
# canvas 기초 샘플 코드
캔버스 태그를 생성하고, 자바스크립트로 '사각형'을 그려보는 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 캔버스 테두리 설정 */
#myCanvas{
border: 1px solid black;
}
</style>
</head>
<body>
<!-- HTML -->
<!-- 1. canvas 엘리먼트를 선언한다: id, widht, height를 태그 내에서 지정해준다. -->
<canvas id="myCanvas" width="400" height="300"></canvas>
<!-- Javascript -->
<script>
// 1. canvas 엘리먼트를 취득한다.
const canvas = document.getElementById('myCanvas');
// 2. 2d모드의 그리기 객체를 취득한다. => 이 객체를 통해 canvas에 그림을 그릴 수 있다.
const ctx = canvas.getContext("2d");
// 3. 색을 설정한다 => CSS에서 사용가능한 색깔로 지정하면 된다. #000000, black 등
ctx.fillStyle = 'blue';
// 4. 파란색 사각형을 그린다 => fillRect(x, y, width, height)
ctx.fillRect(0, 0, 150, 75); // (0, 0)좌표에서 시작하여 가로 150, 세로 75의 사각형을 그린다.
</script>
</body>
</html>
<결과물>
# canvas 참고 사항
1. canvas는 id값으로 접근할 수 있어야 한다.
2. canvas의 크기(width, height)는 반드시 canvas 태그 내에 설정해야 한다.
=> CSS 사용시, 화면 왜곡 및 깨짐이 발생할 수 있다.
3. canvas의 너비, 높이는 canvas.width, canvas.height로 취득 가능하다.
앞으로 canvas에 대한 내용을 정리해볼 계획이다.
'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글
| HTML Canvas(캔버스): 이미지 그리기 방법 drawImage (0) | 2021.06.04 |
|---|---|
| HTML Canvas(캔버스): 그라데이션 gradient 색 설정 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스): 원 circle 그리기 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스): 사각형 그리기 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스) 선 그리기 방법 총정리: 7가지 샘플 예제 코드 (0) | 2021.06.01 |
댓글