홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML5 캔버스 요소 상세한 튜토리얼 1

저자：Eve Cole 업데이트 시간：2025-04-05 11:00:03
HTML5 캔버스 요소 상세한 자습서 1 : 기본 사용.

<canvas>는 html5의 새로운 요소로 JavaScript에서 그래픽을 그리는 데 사용할 수 있습니다. 먼저, <canvas>는 Safari에 적용된 Apple의 Mac OS X 대시 보드에 소개 된 다음 Gecko1.8 브라우저를 기반으로 Firefox 브라우저와 같은이 새로운 요소를 지원합니다. 오늘날 <canvas> 요소는 HTML5 표준 사양의 일부입니다.

이 튜토리얼을 통해 <canvas>가 할 수있는 일을 설명 할 것이며 <canvas> 애플리케이션의 시작점으로 사용할 수 있습니다. <canvas> 요소를 배우는 것은 어렵지 않습니다. HTML 및 JavaScript에 대한 기본 지식과 Firefox 브라우저, Safari 최신 버전 또는 Opera9+에 대한 기본 지식 만 있으면 모든 예제 효과를 볼 수 있습니다.

이제 <canvas> 요소를 정의하는 방법부터 시작하겠습니다.

<canvas id = 튜토리얼 너비 = 150 높이 = 150> </canvas>

<canvas> 요소에는 폭과 높이의 두 가지 속성 만 있으며, 이는 선택 사항이며 DOM 또는 CSS를 사용하여 제어 할 수 있습니다. 너비와 높이가 설정되지 않으면 기본 너비는 300 픽셀이고 높이가 150 픽셀이 사용됩니다. <canvas>의 크기는 CSS를 통해 제어되고 조정될 수 있지만 렌더링 된 이미지는 레이아웃에 적응하도록 스케일링됩니다. 렌더링 결과가 변형 된 것으로 보이면 CSS에 의존 할 필요가 없습니다. <canvas>에 표시된 너비와 높이의 값을 지정할 수 있습니다. 표준 HTML 태그와 마찬가지로 ID 속성도 정의 할 수있어 스크립트 응용 프로그램을보다 편리하게 만들 수 있습니다. <canvas> 요소는 정상적인 그림처럼 스타일 (마진, 경계, 배경 등)을 지정할 수 있습니다. 그러나 이러한 스타일은 캔버스가 생성 한 실제 이미지에 영향을 미치지 않습니다.

이 요소는 비교적 새롭기 때문에 모든 브라우저가 지원하는 것은 아니므로 정상적으로 탐색 할 수없는 사람들에게 대체 디스플레이 정보를 제공해야합니다. 텍스트 나 그림을 사용할 수 있습니다.

  1.  <canvasid = stockgraphwidth = 150height = 150>
  2.  브라우저는 <canvas> 요소를 지원하지 않습니다.
  3.  </캔버스>
  4.  <canvasid = clockwidth = 150height = 150>
  5.  <imgsrc = images.pngwidth = 150height = 150alt = regrend image/
  6.  </캔버스>

Apple Safari에서 <canvas>의 구현은 <Img>과 매우 유사하며 엔드 태그가 없습니다. 그러나 웹 세계에서 <canvas>>에 널리 적용 되려면 대체 컨텐츠에 머무를 장소가 제공되어야하므로 Mozilla 구현에서 태그 (</canvas>)를 종료해야합니다. <canvas id = foo ...> </canvas>는 Safari와 Mozilla와 완전히 호환됩니다 - Safari는 단순히 최종 태그를 무시합니다. 대체 컨텐츠가있는 경우 일부 CSS 트릭을 사용하여 대체 컨텐츠에 대해서만 대체 컨텐츠를 숨길 수 있습니다. 해당 대체 컨텐츠는 IE에 표시되어야하지만 Safari에는 표시되지 않기 때문입니다.

<canvas>는 표시 할 내용을 제어 할 수있는 하나 이상의 렌더링 컨텍스트가있는 고정 크기의 드로잉 화면을 만듭니다. 우리는 2D 렌더링에 중점을두고 있으며 현재 유일한 옵션이기도합니다. 향후 OpenGl을 기반으로 3D 렌더링을 추가 할 수 있습니다.

  1.  varcanvas = document.getElementById ( '튜토리얼');
  2.  varctx = canvas.getContext ( '2d');

위의 코드를 설명해 봅시다. <canvas>의 초기화는 비어 있습니다. 스크립트를 그리려면 컨텍스트를 먼저 렌더링해야합니다. 캔버스 요소 객체의 getContext 메소드를 통해 얻을 수 있습니다. 동시에, 도면을 요구 해야하는 일부 기능도 얻습니다. getContext ()는 해당 유형을 인수로 설명하는 값을 수락합니다. 위의 첫 번째 줄은 getElementByID 메소드를 통해 캔버스 객체의 DOM 노드를 얻습니다. 그런 다음 getContext 메소드를 사용하여 드로잉 작동 컨텍스트를 얻습니다. 또한 스크립트를 사용하여 <canvas>에 대한 브라우저의 지원, 즉 getContext가 존재하는지 여부를 결정할 수도 있습니다.

  1.  varcanvas = document.getElementById ( '튜토리얼');
  2.  if (canvas.getContext) {
  3.  varctx = canvas.getContext ( '2d');
  4.  // DrawingCodehere
  5.  }또 다른{
  6.  // Canvas- UnsupportedCodehere
  7.  }

아래에서 가장 간단한 템플릿부터 시작하여 로컬 백업에 복사 할 수 있습니다.

  1.  <html>
  2.  <헤드>
  3.  <title> CanvastUtorial </title>
  4.  <scriptType = text/javaScript>
  5.  functiondraw () {
  6.  varcanvas = document.getElementById ( '튜토리얼');
  7.  if (canvas.getContext) {
  8.  varctx = canvas.getContext ( '2d');
  9.  }
  10.  }
  11.  </스크립트>
  12.  <styletype = text/css>
  13.  캔버스 {국경 : 1pxSolidBlack;}
  14.  </스타일>
  15.  </head>
  16.  <bodyonload = draw ();>
  17.  <canvasid = tutorialWidth = 150height = 150> </canvas>
  18.  </body>
  19.  </html>

신중하게 Draw라는 함수를 찾을 수 있으며, 페이지가로드 된 후 한 번 (본체 태그의 Onload 속성을 설정하여) Settimeout, SetInterval 또는 기타 이벤트 처리 기능에서도 호출 할 수 있습니다.

시작하려면 간단한 모습을 보자 - 두 개의 인터레이스 된 사각형을 그립니다. 그 중 하나는 알파 투명 효과가 있습니다. 다음 예제에서 어떻게 작동하는지 자세히 살펴 보겠습니다.

  1.  <html>
  2.  <헤드>
  3.  <scriptType = application/x-javaScript>
  4.  functiondraw () {
  5.  varcanvas = document.getElementById (캔버스);
  6.  if (canvas.getContext) {
  7.  varctx = canvas.getContext (2d);
  8.  ctx.fillstyle = rgb (200,0,0);
  9.  ctx.fillRect (10,10,55,50);
  10.  ctx.fillstyle = RGBA (0,0,200,0.5);
  11.  ctx.fillRect (30,30,55,50);
  12.  }
  13.  }
  14.  </스크립트>
  15.  </head>
  16.  <bodyonload = draw ();>
  17.  <canvasid = canvaswidth = 150height = 150> </canvas>
  18.  </body>
  19.  </html>

위의 코드를 HTML 파일에 복사하여 실행할 수 있습니다.

관련 기사