되는 HTML <canvas> 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다.
왼쪽에있는 그래픽이 만들어집니다 <canvas> . 빨간색 사각형, 그라데이션 직사각형, 여러 가지 빛깔의 사각형 및 여러 가지 빛깔의 텍스트 :이 네 가지 요소를 보여줍니다.
HTML 캔버스는 무엇인가?
되는 HTML <canvas> 요소는 스크립트를 통해 즉석에서, 그래픽을 그리는 데 사용된다 (usually JavaScript) .
<canvas> 요소는 그래픽 만 컨테이너입니다. 당신은 실제로 그래픽을 그릴 스크립트를 사용해야합니다.
캔버스 경로, 상자, 원, 텍스트를 그리기 및 이미지를 추가하기위한 여러 가지 방법이 있습니다.
브라우저 지원
테이블의 숫자는 완벽하게 지원하는 최초의 브라우저 버전 지정 <canvas> 요소를.
| 요소 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML 캔버스 텍스트를 그릴 수 있습니다
캔버스 또는 애니메이션없이, 다채로운 텍스트를 그릴 수 있습니다.
HTML 캔버스 그래픽을 그릴 수
캔버스는 그래프와 차트의 이미지와 그래픽 데이터 프레 젠 테이션을위한 훌륭한 기능을 가지고 있습니다.
HTML 캔버스 애니메이션 가능
캔버스 개체를 이동할 수 있습니다. 모든 것이 가능하다 : 복잡한 애니메이션에 간단한 수신 거부 공에서.
HTML 캔버스 대화 일 수있다
캔버스는 자바 스크립트 이벤트에 응답 할 수 있습니다.
캔버스는 사용자 액션에 (키 클릭, 마우스 클릭, 버튼 클릭, 손가락의 움직임을) 응답 할 수 있습니다.
HTML 캔버스는 게임에서 사용 가능
애니메이션 캔버스 '방법은 HTML 게임 응용 프로그램에 대한 많은 가능성을 제공합니다.
캔버스 예
HTML에서, <canvas> 요소는 다음과 같다 :
<canvas id="myCanvas" width="200" height="100"></canvas><canvas> 가 자바 스크립트에 의해 참조 될 수 있도록 요소는 id 속성이 있어야합니다.
폭과 높이 속성은 캔버스의 크기를 정의 할 필요가있다.
Tip: 여러 가질 수 <canvas> 하나의 HTML 페이지의 요소를.
기본적으로 <canvas> 요소는 테두리없이 내용이 없습니다.
테두리를 추가하려면, 스타일 속성을 사용 :
예
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
»그것을 자신을 시도 다음 장에서는 캔버스에 그리는 방법을 보여줍니다.