1. <canvas>란?
<canvas>는 웹페이지에 그래픽을 그릴 때 사용하는 HTML 태그입니다.
예를 들면, 그래프, 사진합성, 애니메이션 등을 만들 수 있습니다.
그래픽을 그리기 위해서는 스크립트(보통 javascript)를 사용합니다.
<canvas> 태그는 IE8외에는 왠만한 브라우저에 모두 지원됩니다.
2. 기본 사용법
태그 속성으로는 width와 height 두가지 뿐이며 속성값을 지정하여 그래픽을 드로잉할 영역의 넓이와 높이를 설정합니다.
만약 두 속성을 지정하지않으면 width는 300px, height는 150px로 초기 설정됩니다.
CSS로도 크기를 지정할 수 있지만 속성값으로 지정하는것을 추천합니다.
(CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타나기 때문)
<canvas> 요소는 일반적인 이미지 처러 스타일 적용이 가능합니다. (margin, bordeer, background 등)
하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다.
캔버스에 스타일이 지정되어있지않으면 투명으로 초기설정 됩니다.
3. <canvas>가 지원되지 않는 브라우저에서는?
<canvas>요소는 IE9 이하의 버전이나 텍스트기반 브라우저 등과 같은 오래된 브라우저들을 위한 대체 콘텐츠를 쉽게 정의할 수 있습니다.
<canvas> 태그 안에 대체 콘텐츠를 삽입하면 <canvas> 태그를 지원하지 않는 브라우저는 <canvas>태그를 무시하고 내부의 대체 콘텐츠를 렌더링하고, <canvas>태그를 지원하는 브라우저에서는 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다.
아래 처럼 코드를 작성하면 <canvas>태그를 지원하지 않는 브라우저는 캔버스대신 내부의 텍스트와 이미지를 대신 제공하게됩니다. <canvas>태그를 지원하는 브라우저는 내부의 텍스트와 이미지를 무시합니다.
<canvas id="stockGraph" width="150" height="150">
캔버스 대체 텍스트
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt="캔버스 대체 이미지"/>
</canvas>
4. 렌더링 컨텍스트
<canvas>는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(renderind contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다.
비어있는 캔버스에 컨텐츠를 그리기 위해서는 어떤 스크립트가 렌더링 컨텍스트에 접근하여 그리도록 해야합니다.
<canvas> 요소는 getContext() 메서드를 이용하여, 렌더링 컨텍스트의 그리기 함수들을 사용할 수 있습니다.
getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다.
2D 그래픽의 경우, CanvasRenderingContext2D (en-US)을 얻기위해 "2d"로 지정합니다.
첫 번째 줄의 스크립트는 document.getElementById() 메서드를 호출하여 <canvas> 요소를 표시할 DOM을 검색합니다. 요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
5. 기본 틀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
**참고 사이트 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial
'HTML' 카테고리의 다른 글
| HTML <canvas> moveTo()함수 - 펜 이동하기 (0) | 2022.04.25 |
|---|---|
| HTML <canvas> 경로(path) 기본 개념 (0) | 2022.04.22 |
| HTML <canvas>를 이용한 직사각형 그리기 (0) | 2022.04.22 |
| 반응형 이미지맵 만들기 a~z (0) | 2022.03.29 |
| HTML5 태그 종류 총 정리 (0) | 2022.02.23 |
