HTML <캔버스> 태그
예시
즉석에서 빨간색 직사각형을 그리고 <canvas> 요소 내부에 표시합니다.
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
태그 는 <canvas>스크립팅(일반적으로 JavaScript)을 통해 즉석에서 그래픽을 그리는 데 사용됩니다.
태그는 투명하고 그래픽 의 <canvas>컨테이너일 뿐입니다. 실제로 그래픽을 그리려면 스크립트를 사용해야 합니다.
요소 내부의 모든 텍스트 <canvas>는 JavaScript가 비활성화된 브라우저와 지원하지 않는 브라우저에 표시됩니다 <canvas>.
팁 및 참고 사항
팁: HTML Canvas Tutorial<canvas> 에서 요소에
대해 자세히 알아보세요 .
팁: 모든 속성과 메서드에 대한 완전한 참조를 보려면 HTML Canvas Reference 를 방문하십시오 .
브라우저 지원
표의 숫자는 요소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
속성
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
전역 속성
<canvas>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<canvas>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
또 다른 <canvas> 예:
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
기본 CSS 설정
대부분의 브라우저는 <canvas>다음 기본값으로 요소를 표시합니다.
예시
canvas {
height: 150px;
width: 300px;
}