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

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를 만드는 것입니다. 이는 매우 간단합니다.