찾다

집 >웹 프론트엔드 >H5 튜토리얼 >웃는 얼굴을 그리기 위해 HTML5에서 캔버스를 사용하는 방법에 대한 튜토리얼_html5 튜토리얼 팁

웃는 얼굴을 그리기 위해 HTML5에서 캔버스를 사용하는 방법에 대한 튜토리얼_html5 튜토리얼 팁

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 15:46:442505검색

201557180008373.jpg (600×436)오늘은 캔버스라는 웹 기술과 문서 개체 모델(일반적으로 DOM이라고 함)과의 연관성에 대해 알아봅니다. 이 기술은 웹 개발자가 JavaScript를 사용하여 HTML 요소에 액세스하고 수정할 수 있도록 하므로 매우 강력합니다.

이제 왜 JavaScript를 활용해야 하는지 궁금하실 것입니다. 즉, HTML과 JavaScript는 상호 의존적이며 캔버스 요소와 같은 일부 HTML 구성 요소는 JavaScript와 독립적으로 사용할 수 없습니다. 결국 캔버스에 그림을 그릴 수 없다면 캔버스가 무슨 소용이 있겠습니까?

이 개념을 더 잘 이해하기 위해 샘플 프로젝트를 통해 간단한 웃는 얼굴을 그려 보겠습니다. 시작해 봅시다.
시작

새 디렉토리를 만들어 프로젝트 파일을 저장한 다음 즐겨 사용하는 텍스트 편집기나 웹 개발 도구를 엽니다. 이 작업을 수행한 후에는 빈 index.html과 빈 script.js를 생성해야 하며 나중에 계속해서 편집할 것입니다.

201557180130749.jpg (600×415)
다음으로 index.html 파일을 수정해 보겠습니다. 프로젝트의 코드 대부분이 JavaScript로 작성되므로 별 문제는 없습니다. HTML에서 해야 할 일은 캔버스 요소와 참조 script.js를 만드는 것입니다. 이는 매우 간단합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. ><본문>
  3.  <캔버스 id='캔버스' 너비='640' 높이='480'>캔버스>
  4.  <스크립트 유형='text/ javascript' src='script.js'>스크립트>
  6. 본문>html>

설명하자면 본문을 통해 문서에 더 많은 요소를 추가할 수 있도록 < html > 태그 세트를 사용합니다. 이번 기회에 id 속성이 canvas인 640*480 캔버스 요소를 완성했습니다.

이 속성은 고유한 식별을 위해 요소에 문자열을 추가할 뿐입니다. 나중에 이 속성을 사용하여 JavaScript 파일에서 캔버스 요소를 찾습니다. 다음으로 JavaScript 언어 유형과 script.js 파일 경로를 지정하는