예
즉석에서 빨간색 사각형을 그립니다, 그리고 내부를 보여 <canvas> 요소 :
<canvas id="myCanvas"></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> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML 4.01과 HTML5의 차이점
<canvas> 태그는 HTML5의 새로운 기능입니다.
팁과주의 사항
참고 : 내부의 모든 텍스트 <canvas> 요소는 지원하지 않는 브라우저에 표시됩니다 <canvas> .
팁 :에 대해 자세히 알아보기 <canvas> 우리의 요소 HTML 캔버스 자습서 .
팁 : 캔버스 객체와 함께 사용할 수있는 모든 속성과 메소드의 완전한 참고로, 우리로 이동 HTML 캔버스 참조 .
속성
= HTML5의 새로운 기능.
| 속성 | 값 | 기술 |
|---|---|---|
| height | pixels | 캔버스의 높이를 지정합니다 |
| width | pixels | 캔버스의 폭을 지정합니다 |
글로벌 속성
<canvas> 태그도 지원 글로벌은 HTML의 속성 .
이벤트 속성
<canvas> 태그도 지원 이벤트는 HTML의 속성 .
기본 CSS 설정
없음.