HTML 캔버스로 시작하기

Sep 14, 2025

어떻게

HTML & lt; 캔버스 & gt; 요소는 웹에서 픽셀 기반 그래픽을 만드는 강력한 솔루션입니다. 자바 스크립트 그리고 비트 연습으로 몇 가지 놀라운 효과를 창출 할 수 있습니다.

이 튜토리얼에서는 캔버스 객체를 만드는 것을 살펴보고 간단한 시각적을 그리는 것을보고 해당 비주얼을 애니메이션합니다.

01. 페이지를 만듭니다

캔버스는 근본적으로 페이지에 배치하고 원하는 영역을 덮고 그릴 수 있도록 확장 할 수있는 HTML 요소입니다. 시작하려면 캔버스 객체가있는 간단한 페이지를 만들어야합니다.

 & lt; Doctype HTML & gt;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = 'UTF-8'/ gt;
  & lt; title & gt; html 캔버스 데모 & lt; / title & gt;
  & lt; 링크 rel = '스타일 시트'href = 'custom.css'/ gt;
  & lt; script src = "canvas.js"& gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; 캔버스 ID = "html-canvas"& gt;
  & lt; / body & gt;
& lt; / html & gt;

02. 캔버스를 조정하십시오

우리에게 놀기 위해 많은 공간을주기 위해 캔버스가 전체 화면을 채우기를 바랍니다. 우리는 또한 검은 배경을 줄 것입니다. 이것은 실제로 스크롤 막대 나 공백으로 끝나지 않고 수행 할 수있는 조금 까다로울 수 있습니다. 아래의 CSS는 그것을 돌봐야합니다.

 캔버스 {
  높이 : 100VH;
  너비 : 100VW;
  위치 : 절대;
  배경색 : # 000000;
}
  마진 : 0;
  패딩 : 0;
}

03. 사용을위한 캔버스를 초기화합니다

다음으로 사용할 준비가 된 캔버스를 설정하려면 일부 JavaScript를 추가해야합니다. 캔버스 요소가 준비되기 전에 스크립트가 실행되지 않도록 DomContentLoaded 이벤트에서 연결할 것입니다. 우리는 또한 캔버스 해상도를 덮는 영역과 일치하도록 설정할 것입니다. 그렇지 않으면 캔버스는 해상도를 증가시키지 않고 확장되어 흐릿 해지거나 픽셀화 된 그래픽으로 이어집니다.

 document.addeventListener ( "DomContentLoaded", 함수 () {
  var canvas = document.getElementByID ( "html-canvas");
  var circles = [];
  VAR 반경 = 50;
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.ClientHeight;
  var context = canvas.getContext ( "2D");
}, 거짓);

04. 모양을 그립니다

마지막 단계에서 우리는 '컨텍스트'라는 것을 삐걱 거리는 것을 알 수 있습니다. 이것은 캔버스의 도면이 발생하는 방식입니다. 다른 라인, 호 및 기본 모양을 그릴 때 사용할 수있는 그림판으로 컨텍스트를 생각하는 것이 가장 쉽습니다.

이제 우리가 할 수있는 일은 360도 아크를 만드는 DrawCircle 함수를 작성하여 우리의 컨텍스트를 사용하는 것입니다. 즉, 원. 우리는 컨텍스트를 정의하고 테두리 및 채우기에 대한 스타일을 설정 한 다음 FILL () 및 Stroke () 함수를 상승하여 셰이크를 실제로 그릴 수있게함으로써이를 수행합니다 (Stroke는 테두리를 그립니다).

 기능 DrawCircle (x, y, 반경, 테두리, border_colour, fill_colour)
  {
  context.beginPath ();
  context.arc (x, y, 반경, 0,2 * math.pi);
  context.strokestyle = border_colour;
  context.FillStyle = fill_colour;
  context.linewidth = 테두리;
  context.closepath ();
  context.fill ();
  context.stroke ();
  }

05. 많은 서클을 만듭니다

큰. 우리는 서클을 그릴 수있는 기능이 있습니다. 이제 우리는 그릴 무언가가 필요합니다. 3 단계에서 코드를 확장하여 원 객체를 설명하는 배열을 만듭니다. 그것은 각 원의 x와 y co-ordinates, 색상 및 방향 값을 저장합니다.

나중에 배열의 내용을 다시 그리는 것으로 서클을 쉽게 애니메이션 할 수 있으므로 서클을 그리는 대신이 배열 구조를 만듭니다.

(var i = 0; I & lt; 20; i ++) { var x = 반경 + (math.random () * (캔버스 .Width - (2 * 반경))); var y = radius + (math.random () * (캔버스. 가치 - (2 * 반경))); var color = randomcolour (); var 방향 = math.random () * 2.0 * math.pi; circles.push ({x : x, y : y, 색상 : 색상, 방향 : 방향}); 무승부(); }

06. 무작위로 색상

마지막 단계에서는 아직 정의되지 않은 몇 가지 새로운 기능을 사용했습니다. randomcolour ()로 시작합시다. 이것은 색상을 나타내는 무작위 16 진수 문자열을 반환하는 유틸리티 함수가 될 것입니다. 구현하기가 상당히 간단합니다.

 함수 랜덤 컬러 () {
  var chars = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i

07. 페이지에서 그래픽을 그립니다

이제 우리는 Draw () 함수를 구현하여 사물을 함께 가져올 준비가되었습니다. 이것은 두 가지 핵심 요소를 수행 할 것입니다. 첫째, ClearRect () 함수를 사용하여 캔버스가 지워집니다. 이것은 우리가 오래된 프레임을 그리는 것을 피하기 위해 서클을 움직이게 할 때 중요합니다. 그런 다음 우리가 만든 배열을 반복하고 우리의 DrawCircle 기능을 사용하여 캔버스의 각 원을 연속적으로 그립니다.

 기능 그리기 () {
  context.clearrect (0, 0, 캔버스 .Width, 캔버스. 가입);
  circles.foreafeach (기능 (동그라미) {
  DrawCircle (circle.x, circle.y, 반경, 5, circle.colour, circle.colour);
    }); }

08. 셰이프를 움직입니다

이제 시도해보십시오. 페이지에 그려진 정적 원을 볼 수 있습니다. 그러나 우리는 그들을 움직이고 싶습니다. 이렇게하려면 몇 가지 방법으로 Draw () 함수를 확장해야합니다. 첫째, 우리는 원에 대한 x 및 y 위치의 변경을 계산하기 위해 배열에 푸시 된 circle.direction 값을 사용합니다.

그런 다음 Draw () 함수를 재귀 적으로 호출하는 RequestAnimationFrame이라는 기본 제공 함수를 사용합니다. RequestAnimationFrame을 사용하면 브라우저가 다음 프레임을 그릴 때를 계산할 때 타이머를 구현할 필요가없는 경우 브라우저가 다시 호출 할시기를 결정할 수 있습니다.

 기능 그리기 () {
  context.clearrect (0, 0, 캔버스 .Width, 캔버스. 가입);
  circles.foreafeach (기능 (동그라미) {
  circle.x = circle.x + math.cos (circle.direction);
  circle.y = circle.y + math.sin (circle.direction);
  DrawCircle (circle.x, circle.y, 반경, 5, circle.colour, circle.colour);
  });
  requestanimationFrame (그리기);
  }

09. 페이지 가장자리에서 바운스를합니다

그래도 아직 누락 된 것이 있습니다. 원은 이제 화면 가장자리에서 사라집니다. 그들을 다시 바운스하자. 이렇게하려면 Draw () 함수의 foreach 루프 내에서 새 함수, 바운스 (원)에 대한 호출을 추가합니다.

바운스 기능은 원이 화면 가장자리에있을 때를 결정하고 그 방향 값을 적절하게 조정합니다.

 기능 반송 (원) {
  if (((circle.x - RADIUS) & lt; 0) || ((circle.y - 반경) & lt; 0) || ((circle.x + 반경) 캔버스 .width) || ((원. y + 반경) & gt; 캔버스 .Height))) {
  circle.direction + = (math.pi / 2);
  }
  if (circle.direction & gt; (2 * math.pi)) {
  circle.direction - = (2 * math.pi);
  }
}

이 기사는 원래 나타났습니다 웹 디자이너 문제 266. 여기 구입하십시오.

관련 기사:

캔버스를 사용하여 디지털 에칭을 작성하십시오
새로운 Node.js 8에 대해 알아야 할 모든 것
HTML5에 대한 After Effects 애니메이션을 내보내는 방법

HTML 캔버스로 시작하기

01. 페이지를 만듭니다

02. 캔버스를 조정하십시오

03. 사용을위한 캔버스를 초기화합니다

04. 모양을 그립니다

05. 많은 서클을 만듭니다

06. 무작위로 색상

07. 페이지에서 그래픽을 그립니다

08. 셰이프를 움직입니다

09. 페이지 가장자리에서 바운스를합니다

어떻게 - 가장 인기있는 기사

Maya 용 Renderman으로 장면 만들기

NextJS / React의 SEO 친화적 인 헤드 구성 요소 만들기

Zbrush와 Maya

아트웍을 장착하는 방법

자신의 캐릭터 성경을 만드는 방법

HTML로 할 수있는 5 가지 모르는 5 가지

현금 흐름을 효과적으로 관리하는 5 가지 방법

3D 렌더링에서의 움직임을 캡처하는 방법

카테고리