HTML5 캔버스 튜토리얼 : 소개

키 테이크 아웃

html5 캔버스는 개발자가 JavaScript를 사용하여 브라우저 내에서 그래픽을 그리며 애니메이션을 생성 할 수있는 강력한 기술입니다. 캔버스 요소는 너비와 높이 속성을 사용하여 HTML 코드로 정의되며 실제 전력은 HTML5 Canvas API를 통해 활용됩니다. HTML5 캔버스 기능은 대화식, 애니메이션이 가능하며 유연하며 모든 주요 브라우저에서 지원합니다. 게임, 광고, 데이터 표현, 교육 및 교육, 예술 및 장식을 포함한 다양한 응용 프로그램에 사용할 수 있습니다. HTML5 캔버스를 사용하려면 개발자에게는 HTML5 캔버스 지원이있는 코드 편집기와 브라우저가 필요합니다. 캔버스 요소는 HTML에서 생성되며 JavaScript는 전체 드로잉 기능 세트를 통해 캔버스 영역에 액세스하는 데 사용되므로 동적 그래픽 생성이 가능합니다. html5 캔버스에는 원점이 캔버스의 왼쪽 상단에 위치하는 고유 한 좌표계가 있습니다. X 좌표는 오른쪽으로 증가하고 Y 좌표는 캔버스의 바닥을 향해 증가합니다. 이 시스템은 표시된 음수 지점이 없으므로 음의 좌표 지점을 사용하여 위치한 객체는 페이지에 나타나지 않습니다.

CSS 애니메이션에 관심이 있습니까? CSS 전환에 대한 완전한 코스 및 전문가 웹 개발자 인 Donovan Hutchinson의 CSS 전환 및 키 프레임 애니메이션에 대한 애니메이션 제작을 확인하십시오. HTML5 캔버스 애니메이션 샘플의 경우 아래의 HTML5 캔버스로 삽화를 시청하면 HTML5 Canvas Mini 코스로 시작한 한 비디오입니다. 플레이어로드… 화가의 툴킷에서 가장 중요한 도구 중 하나는 캔버스입니다. 그것은 그들에게 거의 무제한의 변형과 조합으로 모든 종류의 감정, 인상, 아이디어 등을 표현할 수있는 자유를줍니다. 그리고 그 자유는 그들의 기술 수준과 상상력의 두 가지만 제한 될 수 있습니다.

웹 개발 세계의 상황은 비슷합니다. HTML5의 지속적인 발전과 강력한 사양으로 웹 개발자들은 과거에 불가능한 일을 할 수있는 능력을 얻었습니다. HTML5 Canvas라는 기술 덕분에 그래픽을 그리며 브라우저에서 직접 애니메이션을 작성하십시오. html5 캔버스는 무엇입니까? 캔버스 요소는 너비 및 높이 속성을 사용하여 HTML 코드로 정의 된 요소입니다. 그러나 캔버스 요소의 실제 힘은 HTML5 캔버스 API를 활용하여 달성됩니다. 이 API는 전체 드로잉 기능 세트를 통해 캔버스 영역에 액세스 할 수있는 JavaScript를 작성하여 사용하여 동적으로 생성 된 그래픽이 가능합니다. html5 캔버스의 좋은 점은 무엇입니까? html5의 캔버스 기능을 사용하는 법을 배우는 몇 가지 이유는 다음과 같습니다.

<.> 상호 작용. 캔버스는 완전히 대화식입니다. 키보드, 마우스 또는 터치 이벤트를 듣고 사용자의 작업에 응답 할 수 있습니다. 따라서 개발자는 정적 그래픽 및 이미지에만 국한되지 않습니다.
애니메이션. 캔버스에 그려진 모든 물체는 애니메이션 할 수 있습니다. 이를 통해 간단한 튀는 공에서 복잡한 전진 및 역 운동학에 이르기까지 모든 수준의 애니메이션을 만들 수 있습니다.
• 유연성. 개발자는 캔버스를 사용하여 거의 모든 것을 만들 수 있습니다. 애니메이션의 유무에 관계없이 선, 모양, 텍스트, 이미지 등을 표시 할 수 있습니다. 또한 캔버스 응용 프로그램에 비디오 및/또는 오디오 추가도 가능합니다.
> 브라우저/플랫폼 지원. HTML5 캔버스는 모든 주요 브라우저에서 지원되며 데스크톱, 태블릿 및 스마트 폰을 포함한 다양한 장치에서 액세스 할 수 있습니다.
• 인기. 캔버스 인기는 빠르고 꾸준히 성장하고 있으므로 자원이 부족하지 않습니다. 웹 표준입니다. Flash 및 Silverlight와 달리 캔버스는 HTML5의 일부인 개방형 기술입니다. 모든 브라우저에서 모든 기능이 구현되는 것은 아니지만 개발자는 캔버스가 무기한 주변에있을 수 있습니다.
한 번 개발하고 어디서나 달리십시오. HTML5 캔버스는 훌륭한 휴대 성을 제공합니다. Flash 및 Silverlight와 달리 생성되면 Canvas 응용 프로그램은 가장 큰 컴퓨터에서 가장 작은 모바일 장치에 이르기까지 거의 어디서나 실행될 수 있습니다. 무료 및 접근 가능한 개발 도구. HTML5 Canvas 응용 프로그램을 작성하기위한 기본 도구는 브라우저이자 좋은 코드 편집기입니다. 또한 고급 캔버스 개발을 통해 개발자에게 도움이되는 훌륭한 무료 라이브러리와 도구가 많이 있습니다.
• html5 캔버스로 어떤 응용 프로그램을 만들 수 있습니까?
좋아, 캔버스는 훌륭하다. 그러나 정확히 무엇을 사용할 수 있습니까? 봅시다.
게임. HTML5 Canvas의 기능 세트는 모든 종류의 2D 및 3D 게임을 생산하기에 이상적인 후보입니다.
• 광고. HTML5 캔버스는 플래시 기반 배너 및 광고를 대체합니다. 구매자의 관심을 끌기 위해 필요한 모든 기능이 있습니다.
<.> 데이터 표현. HTML5는 글로벌 데이터 소스에서 데이터를 수집하여 캔버스 요소로 시각적으로 매력적이고 대화식 그래프 및 차트를 생성하는 데 사용할 수 있습니다. <.> 교육 및 훈련. HTML5 캔버스는 텍스트, 이미지, 비디오 및 오디오를 결합한 효과적이고 매력적인 학습 경험을 생성하는 데 사용될 수 있습니다. 예술과 장식. 약간의 상상력과 캔버스의 다양한 색상, 그라디언트, 패턴, 투명성, 그림자 및 클리핑 기능으로 모든 종류의 예술적 및 장식 그래픽을 그릴 수 있습니다.
이제 캔버스를 배워야하는 이유를 알았으니 html5 캔버스의 기본 사항과 사용을 시작하는 방법을 살펴 보겠습니다. 캔버스 렌더링 컨텍스트

모든 html5 캔버스 요소에는

컨텍스트 가 있어야합니다. 컨텍스트는 사용중인 HTML5 Canvas API를 정의합니다. 2D 컨텍스트는 2D 그래픽을 그리고 비트 맵 이미지를 조작하는 데 사용됩니다. 3D 컨텍스트는 3D 그래픽 생성 및 조작에 사용됩니다. 후자는 실제로 WebGL이라고하며 OpenGl Es를 기반으로합니다.

시작하기 캔버스로 시작하려면 HTML5 캔버스 지원이있는 코드 편집기와 브라우저 만 있으면됩니다. Sublime Text와 Google Chrome을 사용하지만 원하는 것을 사용할 수 있습니다. 시작할 HTML이 다음과 같이 보일 것입니다

그리고 여기 우리의 JavaScript가 있습니다. 여기에는 HTML 페이지의 하단에 포함시킬 수 있습니다.

기본적으로 브라우저는 HTML에 지정되지 않더라도 너비 300 픽셀과 높이 150 픽셀의 캔버스 요소를 만듭니다. HTML에서 수행 한 것처럼 너비와 높이를 지정하여 크기를 변경할 수 있습니다. 는 또한 캔버스에 JavaScript에서 사용할 ID 속성을 주었음을 알 수 있습니다. 마지막으로, 원한다면 CSS를 사용하여 테두리를 추가하여 얇은 프레임을 통해 캔버스를 가시 할 수 있습니다. 이것은 필요하지 않습니다. 우리가 캔버스 요소의 경계를 볼 수있는 시각적 원조로 사용됩니다.

. 태그 개구부 사이에 브라우저가 캔버스를 지원하지 않으면 표시 될 컨텐츠를 추가했습니다. 이것은 이전 브라우저가 지원하는 모든 유형의 컨텐츠 일 수 있습니다.

JavaScript는 두 줄로 시작합니다. 첫 번째 줄에서 우리는 ID를 통해 캔버스 요소를 캐시하는 변수를 만듭니다. 두 번째 줄은 getContext () 함수를 사용하여 캔버스의 2D 컨텍스트를 참조하는 변수 (컨텍스트)를 만듭니다. 컨텍스트 변수를 사용하여 모든 캔버스 드로잉 기능 및 속성에 액세스 할 것입니다. 캔버스를 준비하면 캔버스 API 실험을 시작할 수 있습니다. 그러나 그 전에는 캔버스 기능의 몇 가지 측면을 더 명확히하겠습니다.

html5 캔버스 요소 크기 대 드로잉 표면 크기 캔버스 요소의 너비 및 높이 속성 외에도 CSS를 사용하여 캔버스 요소의 크기를 설정할 수도 있습니다. 그러나 캔버스 요소를 CSS로 크기를 조정하는 것은 요소의 너비 및 높이 속성을 설정하는 것과 다릅니다. 캔버스는 실제로 요소 자체의 크기와 요소 드로잉 표면의 크기의 두 가지 크기를 가지고 있기 때문입니다. 요소의 너비와 높이 속성을 설정하면 요소의 크기와 요소 드로잉 표면의 크기를 모두 설정합니다. 그러나 CSS를 사용하여 캔버스 요소를 크기로 크기를 조정하면 드로잉 표면이 아닌 요소의 크기 만 설정합니다. 캔버스 요소의 크기가 드로잉 표면의 크기와 일치하지 않으면 브라우저는 드로잉 표면을 요소에 맞게 조정합니다.이로 인해 CSS를 사용하는 대신 캔버스 요소의 너비 및 높이 속성을 사용하는 것이 좋습니다.

캔버스 좌표계 이해 2D 공간에서 위치는 x 및 y 좌표를 사용하여 참조됩니다. X 축은 수평으로 연장되고 Y 축은 수직으로 확장됩니다. 중심에는 위치 x = 0 및 y = 0이 있으며 (0, 0)으로도 표현 될 수 있습니다. 수학에 사용되는이 객체를 포지셔닝하는이 방법은 직교 좌표 시스템으로 알려져 있습니다. 그러나 캔버스 좌표계는 캔버스의 왼쪽 상단 모서리에 원점을 배치하고 X 좌표는 오른쪽으로 증가하고 Y 좌표는 캔버스의 바닥을 향해 증가합니다. 따라서 표준 직교 좌표 공간과 달리 캔버스 공간에는 눈에 띄는 음수가 없습니다. 부정적인 좌표를 사용하면 응용 프로그램이 실패하지 않지만 음의 좌표 지점을 사용하여 위치한 객체는 페이지에 나타나지 않습니다.

기본 캔버스 예제 언급 한 바와 같이, HTML5 캔버스는 선, 곡선, 경로, 모양, 텍스트 등을 포함하여 여러 유형의 객체를 만들어 봅시다. 나는 Canvas API에 대해 광범위한 세부 사항을 가지지 않을 것입니다. 이것들은 캔버스의 작동 방식에 대한 느낌을 얻는 데 도움이되기 쉽습니다.

드로잉 라인 라인을 그리려면 4 개의 캔버스 API 방법을 사용합니다. 우리는 BeginPath () 메소드로 시작하여 브라우저에 새 경로를 그릴 준비를하도록 지시합니다. 다음으로 Moveto (x, y) 메소드를 사용하여 선의 시작점을 설정합니다. 그런 다음 Lineto (x, y) 메소드는 엔딩 포인트를 설정하고 두 지점을 연결하여 선을 그립니다. 이 시점에서 선이 그려 지지만 여전히 보이지 않습니다. 보이도록 스트로크 () 메소드를 사용하여 기본 검은 색으로 선을 표시합니다.

Codepen에서 Sitepoint (@SitePoint)의 펜 캔버스 라인 예제를 참조하십시오. 사각형을 그립니다

사각형을 그리려면 FillEct (x, y, 너비, 높이) 메소드를 사용하여 좌표와 치수를 FillStyle 속성과 함께 설정하여 필 색상을 설정할 수 있습니다.

Codepen에서 Sitepoint (@SitePoint)의 펜 캔버스 사각형 예제를 참조하십시오. 사각형이 왼쪽 상단 모서리 근처에 위치한다는 점에 주목하십시오.

텍스트를 그립니다 캔버스에 텍스트를 그려 보려면 글꼴 속성과 함께 FillText (String, X, Y)를 사용하여 텍스트의 글꼴, 크기 및 스타일을 설정할 수 있습니다 (CSS의 글꼴 속기와 유사).

Codepen에서 Sitepoint (@SitePoint)의 펜 캔버스 텍스트 예를 참조하십시오. html5 캔버스 API를 사용한 간단한 그리기는 쉽지만 복잡한 모양과 애니메이션을 만들려면 수학과 물리 지식이 필요하다는 것을 알고 있어야합니다. 이 주제에 대한 최고의 책 중 하나는 JavaScript를 사용한 Foundation HTML5 애니메이션입니다. 이 책은 간단한 것에서 복잡한 애니메이션으로 사물을 옮기는 법을 배우는 훌륭한 자료입니다.

더 배우는 곳은 어디입니까? 여기서 배우고 싶다면 몇 가지 자료가 있습니다

캔버스 튜토리얼 - MDN에 대한 훌륭한 튜토리얼, 예제, 삽화 및 자세한 설명으로 가득 찬 html5 캔버스 요소 안내서 - 6 개의 개정판의 초보자 튜토리얼. html5 캔버스 튜토리얼 - Kineticjs Canvas 라이브러리의 제작자 인 Eric Rowell이 만든 전체 튜토리얼 세트. 모든 예는 대화식입니다. 당신은 그들과 함께 놀고 즉시 결과를 볼 수 있습니다.
속도를 높이십시오 캔버스 개발

"RAW"HTML5 CANVAS API로 작업하는 것은 지루한 일이 될 수 있습니다. 그렇기 때문에 좋은 캔버스 라이브러리로 전환하여 캔버스 개발 속도를 훨씬 쉽게 만들 수있는 좋은 캔버스 라이브러리로 전환하는 것이 좋습니다.

여기에 몇 가지 인기있는 선택이 있습니다 :
kineticjs paper.js
• easeljs
fabric.js ocanvas
• html5 캔버스 개발 속도를 높이는 또 다른 방법은 Adobe Illustrator에 ai-> canvas 플러그인을 사용하는 것입니다. Sitepoint 에서이 기사에서 플러그인 개요를 찾을 수 있습니다.
결론
• <.> 그게 다야. 이 입문 HTML5 캔버스 튜토리얼 이이 강력한 기술을 계속 배우고 탐색 할 수있는 좋은 출발점을 제공했으면 좋겠습니다. html5 캔버스 에 대한 자주 묻는 질문 (FAQ) SVG와 HTML5 캔버스의 차이점은 무엇입니까?
SVG (확장 가능한 벡터 그래픽)와 HTML5 캔버스는 모두 그래픽을 만드는 데 사용되는 웹 기술입니다. 그러나 접근 방식과 사용 사례가 다릅니다. SVG는 각 그려진 모양이 물체로 기억되는 벡터 기반 접근법입니다. 객체의 속성이 변경되면 브라우저는 장면을 자동으로 다시 렌더링 할 수 있습니다. SVG는 대화식 그래픽 및 요소 애니메이션에 적합합니다. 반면에, HTML5 캔버스는 픽셀 기반입니다. 모양이 그려지면 시스템에 의해 잊혀집니다. 속성이 변경되면 전체 장면과 함께 다시 그려야합니다. 이렇게하면 캔버스가 그래픽 집약적 인 게임이나 사진 편집 소프트웨어와 같은 응용 프로그램에 이상적입니다.

캔버스에 텍스트를 추가 할 수 있습니까?

캔버스에 텍스트를 추가하는 것은 간단합니다. FillText (Text, X, Y) 메소드를 사용할 수 있습니다. 여기서 텍스트는 쓰려는 문자열이고 X와 Y는 텍스트가 시작되는 좌표입니다. 글꼴 및 FillStyle 속성을 사용하여 텍스트의 글꼴, 크기 및 색상을 사용자 정의 할 수도 있습니다. 게임 개발에 html5 캔버스를 사용할 수 있습니까?

예, html5 캔버스는 2D 게임 개발에 인기있는 선택입니다. 픽셀 기반 특성은 브라우저에서 원활하게 실행되는 복잡하고 그래픽 집약적 인 게임을 만드는 데 적합합니다. 그러나 3D 게임의 경우 캔버스 API를 사용하는 WebGL은 하드웨어 가속 기능으로 인해 더 나은 선택이 될 것입니다.

html5 캔버스로 모양을 어떻게 그릴 수 있습니까?

html5 캔버스 모양을 그리는 몇 가지 방법을 제공합니다. 예를 들어, 사각형을 그리려면 FillEct (X, Y, 너비, 높이) 메소드를 사용할 수 있습니다. 원을 그리려면 아크 (x, y, radius, startangle, endangle) 메소드를 사용할 수 있습니다. 경로를 사용하여 복잡한 모양을 그릴 수 있습니다.

HTML5 캔버스로 물체를 애니메이션 할 수 있습니까?

HTML5 캔버스의 애니메이션은 전체 캔버스를 높은 속도로 일반적으로 60 회 당 60 번씩 다시 그리기하여 달성됩니다. 두번째. 각 redraw를 프레임이라고하며, 객체의 속성을 변경하여 프레임 사이에서 움직임의 환상을 만들어냅니다. 이것은 일반적으로 requestAnimationFrame () 메소드를 사용하여 수행됩니다.

캔버스에 그려진 객체와 상호 작용할 수 있습니까?

SVG와 달리 HTML5 캔버스는 객체가 그려지면 객체를 기억하지 못합니다. 즉, 이벤트 처리기를 직접 첨부 할 수 없습니다. 그러나 JavaScript에서 객체의 속성을 추적하고 상호 작용이 발생할 때 캔버스를 다시 그리기하여 상호 작용을 달성 할 수 있습니다.

캔버스 내용을 이미지로 저장할 수 있습니까?
할 수 있습니다. Todataurl () 메소드를 사용하여 캔버스의 내용을 이미지로 저장하십시오. 이 메소드는 유형 매개 변수 (기본값으로 png)로 지정된 형식으로 이미지의 표현을 포함하는 데이터 URL을 반환합니다.

캔버스를 어떻게 지울 수 있습니까?

전체 전체를 지울 수 있습니다. ClearRect (x, y, 너비, 높이) 메소드를 사용하는 캔버스. 전체 캔버스를 지우려면 x와 y를 0으로, 너비와 높이를 캔버스의 너비와 높이로 설정할 수 있습니다.

모든 브라우저에서 html5 캔버스를 사용할 수 있습니까?
html5 캔버스는 Chrome, Firefox, Safari, Opera 및 Edge를 포함한 모든 최신 브라우저에서 지원됩니다. 그러나 Internet Explorer 8에서 지원되지 않습니다.

html5 캔버스에서 오류를 처리 할 수있는 방법은 무엇입니까?

html5 캔버스의 오류 처리는 일반적으로 JavaScript의 Try-Catch 블록을 사용하여 수행됩니다. 그러나 캔버스는 저수준 API이므로 상세한 오류 메시지를 제공하지 않습니다. 따라서 디버깅은 어려울 수 있으며 종종 많은 시행 착오가 필요합니다.

위 내용은 HTML5 캔버스 튜토리얼 : 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!