<canvas>는 스크립트 언어 (일반적으로 JavaScript)에서 그래픽을 그리는 데 사용할 수있는 새로운 HTML 요소입니다. 예를 들어, 사진을 그리거나 이미지를 합성하거나 간단하고 간단하지 않은 애니메이션을 수행하는 데 사용될 수 있습니다. 오른쪽의 이미지는 <canvas>의 일부 응용 프로그램 예를 보여 주며이 자습서에서 그 구현을 볼 수 있습니다.
<canvas>는 Apple의 Mac OS X 대시 보드에 처음 소개 된 후 Safari에 적용되었습니다. Firefox 1.5와 같은 Gecko1.8을 기반으로 한 브라우저 도이 새로운 요소를 지원합니다. <canvas> 요소는 Whatwg Web Applications 1.0의 일부이며, 모든 사람에게 알려져 있습니다. HTML 5 표준 사양.
이 튜토리얼에서는 자신의 웹 페이지에서 <canvas> 요소를 사용하는 방법을 알려 드리겠습니다. 제공된 예제는 <canvas>로 할 수있는 명확한 개념을 제공해야합니다. 이 예제는 또한 응용 프로그램 <canvas>의 출발점 역할을 할 수 있습니다.
사용하기 전에
HTML 및 JavaScript에 대한 기본 지식이있는 한 <canvas> 요소를 사용하는 것은 어렵지 않습니다.
위에서 언급했듯이 모든 현대식 브라우저가 <canvas> 요소를 지원하는 것은 아니므로 Firefox 1.5 이상 또는 Opera 9와 같은 다른 도마뱀 기반 브라우저 또는 모든 버전의 Safari가 필요합니다.
<canvas> 요소
<canvas> 요소 자체를 보면서이 자습서를 시작합시다.
<canvas> 요소의 정의부터 시작하겠습니다.
<canvas id = 튜토리얼 너비 = 150 높이 = 150> </canvas>
이것은 <Img> 요소와 매우 비슷해 보입니다. 유일한 차이점은 SRC 및 ALT 속성이 없다는 것입니다. <canvas>는 <Img>과 비슷해 보입니다. 유일한 차이점은 SRC 및 ALT 속성이 없다는 것입니다. <canvas> 요소에는 너비 와 높이의 두 가지 속성 만 있습니다 . 이들은 모두 선택 사항이며 DOM 속성 또는 CSS 규칙을 사용하여 설정할 수도 있습니다. 너비와 높이 속성이 지정되지 않으면 캔버스의 너비는 300 픽셀 , 높이 150 픽셀 입니다. 요소는 CSS에 의해 임의로 크기가 될 수 있지만, 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 확장됩니다. (렌더링이 왜곡 된 것처럼 보이면 CSS가 아닌 <canvas> 속성에 너비와 높이 속성을 명시 적으로 지정하십시오.) CSS를 통해 캔버스의 크기는 크기가 크게 높아질 수 있지만, 렌더링 이미지는 레이아웃에 적응하는 데 적응하는 데 적응하는 데 적응할 수 있다면, CSS에 크게 확대 될 수 없다는 것을 명시 할 수 없으며, 렌더링 결과가 형성 될 수 없다는 것을 명시 할 수 없다는 것을 명시 할 수 없다는 것을 명시 할 수 없다는 것을 명시 할 수 없다는 것을 명시 할 수 없다는 것을 명시 할 수 있습니다. 캔버스).
ID 속성은 <canvas> 요소에만 국한되지 않지만 모든 HTML 요소 (예 : 클래스와 같은)에 적용될 수있는 기본 HTML 속성 중 하나입니다. ID를 공급하는 것이 항상 좋은 생각입니다. 이는 스크립트에서 ID를 훨씬 쉽게 식별 할 수 있기 때문입니다.
ID 속성은 <canvas>에만 배타적이지 않습니다. 표준 HTML 태그와 마찬가지로 HTML 요소는 ID 값을 지정할 수 있습니다. 일반적으로 요소에 대한 ID를 지정하는 것이 좋습니다. 이는 스크립트에 쉽게 적용 할 수 있습니다.
<canvas> 요소는 일반적인 이미지 (마진, 테두리, 배경 등)와 마찬가지로 스타일링 할 수 있습니다. 그러나이 규칙은 캔버스의 실제 도면에 영향을 미치지 않습니다. 이 튜토리얼의 뒷부분 에서이 작업이 어떻게 이루어 지는지 살펴 보겠습니다. 캔버스에 스타일 규칙이 적용되지 않으면 처음에는 완전히 투명합니다. <canvas> 요소는 일반적인 이미지 (마진, 테두리, 배경 등)와 마찬가지로 스타일링 할 수 있습니다. 그러나이 규칙은 캔버스의 실제 도면에 영향을 미치지 않습니다. 이 튜토리얼의 뒷부분 에서이 작업이 어떻게 이루어 지는지 살펴 보겠습니다. 캔버스에 스타일 규칙이 적용되지 않으면 처음에는 완전히 투명합니다. <canvas> 요소는 일반적인 이미지 (마진, 테두리, 배경 등)와 마찬가지로 정상적인 이미지 인 것처럼 스타일링 할 수 있습니다. 그러나 이러한 스타일은 캔버스가 생성 한 실제 이미지에 영향을 미치지 않습니다. 아래에서는 스타일을 적용하는 방법을 볼 수 있습니다. 스타일을 지정하지 않으면 캔버스는 기본적으로 완전히 투명합니다.
<canvas> 요소는 여전히 비교적 새롭고 일부 브라우저 (예 : Firefox 1.0 및 Internet Explorer)에서 구현되지 않으므로 브라우저가 요소를 지원하지 않으면 폴백 컨텐츠를 제공하는 수단이 필요합니다.
<canvas>는 비교적 새롭기 때문에 일부 브라우저는 Firefox 1.0 및 Internet Explorer와 같은 구현하지 않으므로 캔버스를 지원하지 않는 브라우저에 대체 디스플레이 컨텐츠를 제공해야합니다.
운 좋게도 이것은 매우 간단합니다. 우리는 캔버스 요소 내부에 대체 컨텐츠를 제공합니다. 지원하지 않는 브라우저는 요소를 완전히 무시하고 폴백 컨텐츠를 렌더링하면 다른 사람들은 캔버스를 정상적으로 렌더링합니다.
예를 들어 캔버스 내용에 대한 텍스트 설명을 제공하거나 동적으로 렌더링 된 컨텐츠의 정적 이미지를 제공 할 수 있습니다. 이것은 다음과 같이 보일 수 있습니다.
대체 콘텐츠를 캔버스 요소에 직접 삽입하면됩니다. 캔버스를 지원하지 않는 브라우저는 캔버스 요소를 무시하고 대체 컨텐츠를 직접 렌더링하는 반면 지원되는 브라우저는 캔버스를 정상적으로 렌더링합니다. 예를 들어, 대체 내용으로 일부 텍스트 나 그림을 캔버스로 채울 수 있습니다.
<캔버스 ID = StockGraph 너비 = 150 높이 = 150> 현재 주가 : $ 3.15 +0.15 </캔버스> <Canvas ID = 클록 너비 = 150 높이 = 150> <IMG SRC = Image/Clock.png 너비 = 150 높이 = 150/> </canvas>
Apple Safari 구현에서 <canvas>는 <Img>과 거의 같은 방식으로 구현 된 요소입니다. 엔드 태그가 없습니다. 그러나 <canvas>가 웹에서 광범위하게 사용하려면 일부 폴백 콘텐츠 시설을 제공해야합니다. 따라서 Mozilla의 구현에는 엔드 태그 (</canvas>) 가 필요합니다 .
Apple Safari에서 <canvas>의 구현은 <Img>과 매우 유사하며 엔드 태그가 없습니다. 그러나 웹 세계에서 <canvas>>가 널리 적용 되려면 대체 컨텐츠를위한 장소를 제공해야하므로 Mozilla 구현에서 태그 (</canvas>)를 끝내야합니다.
폴백 콘텐츠가 필요하지 않은 경우 간단한 <canvas id = foo ...> </canvas>는 Safari 및 Mozilla와 완전히 호환됩니다. Safari는 단순히 종료 태그를 무시합니다.
대체물이 없으면 <canvas id = foo ...> </canvas>는 Safari와 Mozilla와 완전히 호환됩니다. Safari는 단순히 끝 태그를 무시합니다.
폴백 컨텐츠가 필요한 경우, 일부 CSS 트릭을 사용하여 Safari (캔버스 만 렌더링해야 함)의 폴백 컨텐츠를 마스킹하고 IE에서 CSS 트릭 자체를 마스킹해야합니다 (폴백 컨텐츠를 렌더링해야 함).
대체 컨텐츠가있는 경우 일부 CSS 트릭을 사용하여 대체 컨텐츠에 대해서만 대체 컨텐츠를 숨길 수 있습니다. 해당 대체 컨텐츠는 IE에 표시되어야하지만 Safari에는 표시되지 않기 때문입니다.
<canvas>는 하나 이상의 렌더링 컨텍스트를 노출시키는 고정 된 크기 드로잉 표면을 만듭니다. 우리는 현재 정의 된 유일한 렌더링 컨텍스트 인 2D 렌더링 컨텍스트에 중점을 둡니다. 앞으로 다른 상황은 다른 유형의 렌더링을 제공 할 수 있습니다. 예를 들어, OpenGL ES를 기반으로 한 3D 컨텍스트가 추가 될 수 있습니다.
<canvas>에 의해 생성 된 고정 크기 드로잉 화면은 하나 이상의 렌더링 컨텍스트를 열어 표시 할 내용을 제어 할 수 있습니다. 우리는 현재 유일한 옵션 인 2D 렌더링에 중점을두고 있으며 향후 OpenGL을 기반으로 3D 컨텍스트를 추가 할 수 있습니다.
<canvas>는 처음에는 비어 있고, 스크립트가 먼저 렌더링 컨텍스트에 액세스하고 그려야하는 것을 표시합니다. 캔버스 요소에는 렌더링 컨텍스트와 그 드로잉 기능을 얻는 데 사용되는 getContext라는 DOM 메소드가 있습니다. getContext ()는 하나의 매개 변수, 컨텍스트 유형을 취합니다.
<canvas>의 초기화는 비어 있습니다. 스크립트를 작성하려면 먼저 렌더링 컨텍스트가 필요합니다. 캔버스 요소 객체의 getContext 메소드를 통해 얻을 수 있습니다. 동시에, 일부 기능은 그리기를 위해 얻습니다. getContext ()는 해당 유형을 인수로 설명하는 값을 수락합니다.
var canvas = document.getElementById ( 'tutorial'); var ctx = canvas.getContext ( '2d');
첫 번째 줄에서는 GetlementByID 메소드를 사용하여 Canvas Dom 노드를 검색합니다. 그런 다음 getContext 메소드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.
위의 첫 번째 줄은 getElementByID 메소드를 통해 캔버스 객체의 DOM 노드를 얻습니다. 그런 다음 도면 작동 컨텍스트는 getContext 메소드를 통해 얻습니다.
폴백 컨텐츠는 <canvas>를 지원하지 않는 브라우저에 표시됩니다. 스크립트는 실행할 때 지원을 확인할 수도 있습니다. GetContext 메소드를 테스트하여 쉽게 수행 할 수 있습니다. 위의 코드 스 니펫은 다음과 같습니다.
지원되지 않는 브라우저에 대체 컨텐츠를 표시하는 것 외에도 브라우저가 스크립트를 통해 캔버스를 지원하는지 확인할 수도 있습니다. 이 방법은 매우 간단합니다. GetContext가 존재하는지 판단하십시오.
var canvas = document.getElementById ( 'tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ( '2d'); // 여기에 코드 그리기} else {// canvas-unsupported code}}다음은 미니멀리즘 템플릿이 있습니다.이 템플릿은 나중에 예제의 출발점으로 사용할 것입니다. 이 파일을 다운로드하여 시스템에서 작업 할 수 있습니다.
다음과 같은 가장 간단한 코드 템플릿 (후속 예제에 필요한)부터 시작하여 로컬로 사용할 파일을 다운로드 할 수 있습니다.
<html> <head> <title> 캔버스 튜토리얼 </title> <script type = text/javaScript> 함수 draw () {var canvas = document.getElementById ( 'Tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ( '2d'); }} </script> <스타일 유형 = text/css> canvas {border : 1px solid black; } </style> </head> <body onload = draw ();> <canvas id = 튜토리얼 너비 = 150 높이 = 150> </캔버스> </body> </html>스크립트를 보면 Draw라는 함수를 만들었습니다. 페이지가로드가 완료되면 (본체 태그의 Onload 속성을 통해) 실행됩니다. 이 기능은 페이지가 먼저로드 된 한 Settimeout, SetInterval 또는 기타 이벤트 핸들러 기능에서 호출 될 수 있습니다.
주의를 기울이면 Draw라는 함수를 준비했으며 페이지가로드 된 후 한 번 (본체 태그의 Onload 속성을 설정하여) Settimeout, SetInterval 또는 기타 이벤트 처리 기능에서도 호출 할 수 있습니다.
시작하기 위해 다음은 두 개의 교차 사각형을 그리는 간단한 예입니다. 그 중 하나는 알파 투명성이 있습니다. 이후 예에서 더 자세한 내용으로 이것이 어떻게 작동하는지 살펴볼 것입니다.
시작하려면 간단한 모습을 보자 - 두 개의 인터레이스 된 사각형을 그립니다. 그 중 하나는 알파 투명 효과가 있습니다. 다음 예제에서 어떻게 작동하는지 자세히 살펴 보겠습니다.
<html> <head> <script type = application/x-javaScript> 함수 draw () {var canvas = document.getElementById (canvas); if (canvas.getContext) {var ctx = canvas.getContext (2d); ctx.fillstyle = rgb (200,0,0); ctx.fillRect (10, 10, 55, 50); ctx.fillstyle = rgba (0, 0, 200, 0.5); ctx.fillRect (30, 30, 55, 50); 접