- JavaScript를 이용하면 HTML 상에 도형을 그릴 수 있음.
* canvas
- HTML5의 주요 기능 중 하나인 canvas는 HTML5에서 추가된 canvas 요소와 JavaScript를 사용하여 그림을 그림.
[canvas 태그]
- canvas로 그림을 그리려면 HTML 문서상에 그리기 영역(캔버스)을 작성해야 함.
- 작성 시에는 canvas 태그를 사용함.
- canvas는 투명하므로 CSS로 테두리 선을 긋거나 하지 않으면 아무것도 표시되지 않음.
<canvas id="canvas1" width="300" height="300"></canvas>
width 속성은 가로 폭을, height 속성은 높이를 설정함. 단위는 픽셀.
아무것도 지정하지 않는 경우 폭 300픽셀, 높이가 150픽셀로 설정됨.
[JavaScript 측 준비]
- 먼저 JavaScript에서는 조금 전에 작성한 canvas 요소의 DOM 오브젝트를 취득함.
vas canvas = document.getElementById("canvas1");
- 그런 다음, 컨텍스트를 취득함.
- 컨텍스트는 그림을 그리기 위한 종이와 같은 것임.
- 컨텍스트를 구하려면 canvas 요소의 getContext() 메서드를 사용해야 함.
vas context = canvas.getContext("2d");
2D 컨텍스트
* 예제 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 예제</title>
<script>
function draw() {
var canvas = document.getElementById("canvas1");
if(canvas.getContext) { // getContext() 메서드를 웹 브라우저에서 지원하고 있는지를 확인함.
var cvs = canvas.getContext("2d");
cvs.strokeRect(50, 80, 100, 80); // 왼쪽 위의 좌표를 (50, 80)으로 하는 100x80픽셀의 사각형을 그림.
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas1" width="300" height="300">
canvas를 표시할 수 없습니다. // canvas 요소 안의 텍스트는 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타남.
</canvas>
</body>
</html> |
cs |
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
'Programming > HTML5' 카테고리의 다른 글
| 도형 그리기 4 (0) | 2017.05.19 |
|---|---|
| 도형 그리기 3 (0) | 2017.05.19 |
| 도형 그리기 2 (0) | 2017.05.19 |
| 도형 그리기 1 (0) | 2017.05.19 |
| Ajax란? (0) | 2017.05.19 |
| HTML5의 통신 관련 기술 (0) | 2017.05.19 |
| 백그라운드와 오프라인 (0) | 2017.05.19 |
| 스토리지와 파일 (0) | 2017.05.19 |
