html로 <canvas> 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다.
왼쪽에있는 그래픽이 만들어집니다 <canvas> . 빨간색 사각형, 그라데이션 사각형, 다색 사각형 및 여러 가지 빛깔의 텍스트 : 그것은 네 가지 요소를 보여줍니다.
HTML 무엇입니까 Canvas ?
html로 <canvas> 요소는 스크립트를 통해 즉시, 그래픽을 그리는 데 사용됩니다 (usually JavaScript) .
<canvas> 요소는 그래픽 만 컨테이너입니다. 당신은 실제로 그래픽을 그릴 스크립트를 사용해야합니다.
Canvas 경로, 상자, 원, 텍스트를 그리기 및 이미지를 추가하기위한 여러 가지 방법이 있습니다.
캔버스 요소 HTML5의 일부로서 2 차원 형상과 비트 맵 이미지의 동적 스크립트 표현을 허용한다. 이 비트 맵을 업데이트하고 내장 된 장면 그래프가없는 낮은 수준, 절차 적 모델이다.
브라우저 지원
테이블의 숫자는 완벽하게 지원하는 최초의 브라우저 버전 지정 <canvas> 요소를.
| 요소 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
역사
캔버스는 처음 대시 보드 위젯과 Safari 브라우저와 같은 2004 전력 공급 분야에서 자신의 맥 OS X 웹킷 구성 요소 내부에 사용하기 위해 애플에 의해 도입되었다.
이후 2005 년에서 2006 년 Gecko 브라우저, 오페라의 버전 1.8에 채택되었으며, 차세대 웹 기술에 대한 새로운 제안 사양에 웹 하이퍼 텍스트 응용 기술 워킹 그룹 (WHATWG)에 의해 표준화.
용법
캔버스 높이와 너비 속성으로 HTML 코드에 정의 된 당김 지역으로 구성되어 있습니다. 자바 스크립트 코드는 따라서 동적으로 생성 된 그래픽을 허용, 다른 일반적인 2D API에 유사한 도면 기능의 전체 세트를 통해 지역에 액세스 할 수 있습니다.
캔버스의 일부 예상 용도는 건물 그래프, 애니메이션, 게임, 이미지 구성을 포함한다.
Canvas 예
canvas HTML 페이지에 사각형 영역입니다. 기본적으로 canvas 테두리없이 내용이 없습니다.
마크 업은 다음과 같습니다 :
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: 항상 id 속성을 지정 (to be referred to in a script) , 및 폭과 높이의 크기를 정의하는 속성 canvas .
테두리를 추가하려면 사용 style 속성을 :
기본 Canvas 예
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> »그것을 자신을 시도 자바 스크립트로 그리기
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); »그것을 자신을 시도 선을 그리다
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); »그것을 자신을 시도 원을 그립니다
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); »그것을 자신을 시도 텍스트 그리기
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); »그것을 자신을 시도 스트로크 텍스트
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); »그것을 자신을 시도 선형 그라데이션을 그립니다
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); »그것을 자신을 시도 원형 그라데이션을 그립니다
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); »그것을 자신을 시도 이미지 그리기
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); »그것을 자신을 시도 HTML Canvas 튜토리얼
HTML에 대한 모든 내용은 <canvas> , 전체 HTML 방문 Canvas 자습서 .