HTML 참조 매뉴얼

HTML 태그 전체

HTML: <canvas> 태그

HTML <canvas> 태그는 HTML5요소는 HTML 문서에서 그리기 위해 사용됩니다2D 객체와 비트맵 이미지 등 그래픽의 컨테이너입니다. 이 컨테이너 내의 실제 그래픽은 <script> 태그로 그립니다. 이 태그는 일반적으로 <canvas> 요소로도 불립니다.

온라인 예제

HTML <canvas> 요소를 통해 블루 사각형을 표시하세요:

예제

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　canvas by ko.oldtoolbag.com</title>
</head>
<body>
<h1>Graphics Example</h1>
<canvas id="w3codebox_com_canvas" width="125"height="125></canvas>
<script>
　　var canvas = document.getElementById("w3codebox_com_canvas");
　　var ctx = canvas.getContext("2d");
　　ctx.fillStyle = "#4B6692";
　　ctx.fillRect(25,　25,　100,　100);
　　ctx.clearRect(45,　45,　60,　60);
　　ctx.strokeRect(50,　50,　50,　50);
</script>
</body>
</html>

테스트를 보세요 ‹/›

이 HTML5문서 예제에서는 <canvas> 태그를 사용하여 크기가125px x 125px로且ID를 가진 컨테이너w3codebox_com_canvas.<script> 태그는 이 컨테이너 내에서 그래픽을 그리기 위해 사용됩니다. 이 예제에서는 내부가 기울어진 블루 사각형을 그렸습니다.

브라우저 호환성

IEFirefoxOperaChromeSafari

IE 9、Firefox、Opera、Chrome 및 Safari는 <canvas> 태그를 지원합니다.

주의사항:IE 8 또는 이전 버전의 IE 브라우저는 <canvas> 태그를 지원하지 않습니다.

태그 정의 및 사용 설명

<canvas> 태그는 스크립트(보통 JavaScript)를 통해 그래픽(예: 그래프와 다른 이미지)을 그립니다.

<canvas> 태그는 그림 컨테이너일 뿐, 그래픽을 그리기 위해 스크립트를 사용해야 합니다.

HTML <canvas> 요소는 <body> 태그 내에 위치합니다。
<canvas> 태그는 그래픽의 컨테이너로 사용되며, 모든 그래픽은 <canvas> 태그 외에도 캔버스 스크립트 API나 WebGL API를 사용하여 <script> 태그로 그려집니다

HTML 4.01 와 HTML5사이의 차이

<canvas> 태그는 HTML5 속성

추가로

주의사항:<canvas> 요소에 포함된 모든 텍스트는 <canvas>를 지원하지 않는 브라우저에서 표시됩니다。

추가로canvas 객체의 모든 속성과 메서드를 알고 싶다면, 다음을 참조하세요HTML 그림판 참조 매뉴얼。

속성

New : HTML5 속성

속성	값	설명
heightHTML5	pixels	그림판의 높이를 정의합니다。
widthHTML5	pixels	그림판의 너비를 정의합니다。