728x90
HTML Canvas
오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :)
제가 Canvas 공부하게 된 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다.
canvas 기초 사용법
- html 문서에 canvas 엘리먼트를 선언한다.
- canvas 엘리먼트에 id 속성을 설정한다.
- canvas 태그 내부에 width, height를 설정한다.
- canvas 내장 '그리기 객체'를 취득한다.
- 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다.
- 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다.
- 자바스크립트를 통해 다양한 효과를 구현한다.
캔버스 사이즈 설정
<!DOCTYPE html>
<html lang="ko">
<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>canvas</title>
<style>
body {
margin: 0;
}
.canvas {
width: 500px;
height: 300px;
background-color: #eee;
}
</style>
</head>
<body>
<h1>캔버스 사이즈 설정</h1>
<canvas class="canvas" width="500" height="300"></canvas>
<canvas class="canvas canvas2" width="1000" height="600"></canvas>
<script>
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();
console.log(Math.PI);
</script>
</body>
</html>
결과
content 사이즈 위치 설정
<!DOCTYPE html>
<html lang="ko">
<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>context 사이즈 위치 설정</title>
<style>
body {
margin: 0;
}
.canvas {
background-color: #eee;
}
</style>
</head>
<body>
<h1>context 사이즈 위치 설정</h1>
<canvas class="canvas" width="600" height="400"></canvas>
<script>
const canvas = document.querySelector(".canvas");
const context = canvas.getContext("2d");
context.fillRect(50, 50, 100, 100);
context.fillStyle = "red";
context.fillRect(0, 0, 100, 100);
context.clearRect(50, 50, 50, 50);
context.strokeStyle = "red";
context.strokeRect(150, 150, 50, 50);
</script>
</body>
</html>
결과
기본적으로 제공하는 canvas의 기능 정리
const canvas = document.getElementById("number"); //id로 canvas element에 접근
const context = canvas.getContext("2d"); //2d 그래픽을 그릴 수 있는 메서드를 지닌 HTML5 오브젝트
const x = 32; //원점 x 좌표
const y = 32; //원점 y 좌표
const radius = 30; //반지름
const startAngle = 0; //0도
const endAngle = Math.PI * 2; //360도
context.fillStyle = "rgb(0,0,0)"; //채우기 색 설정
context.beginPath(); //새로운 경로 생성, 경로 생성 후 그리기 명령들은 경로를 구성하고 만드는데 사용
context.arc(x, y, radius, startAngle, endAngle); //x,y위치에 원점을 두고, radius 반지름을 가지고, startAngle에서 시작하여 endAngle에서 끝나며 주어진 방향(옵션 기본값은 시계방향)으로 호 그림
context.fill(); //경로의 내부를 채워서 내부가 채워진 도형을 그린다. 열린도형은 자동으로 닫히므로 closePath()호출 필요 X
context.strokeStyle = "rgb(255,255,255)"; //윤곽선의 색 설정
context.lineWidth = 3; //윤곽선의 두께
context.beginPath(); //새로운 경로 생성
context.arc(x, y, radius, startAngle, endAngle); //원 생성
context.stroke(); //윤곽선을 이용하여 형 그림
context.fillStyle = "rgb(255,255,255)"; //채우기 색 설정
context.font = "32px sans-serif"; //문자 폰트 크기, 글씨체
context.textAlign = "center"; //문자 정렬
context.textBaseline = "middle"; //베이스 라인 정렬 설정
context.fillText("1", x, y); //주어진 x,y 위치에 주어진 "1" 텍스트를 채움, 최대폭 maxwidth 옵션값
'javascript > javascript 심화지식' 카테고리의 다른 글
| prototype (0) | 2021.07.19 |
|---|---|
| 상속 (0) | 2021.07.19 |
| 전역객체(Global object) (0) | 2021.07.19 |
| 생성자와 new (0) | 2021.07.19 |
| 함수호출 apply (0) | 2021.07.17 |
댓글