HTML5에서 Canvas를 사용하여 웃는 얼굴을 그리는 코드-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5에서 Canvas를 사용하여 웃는 얼굴을 그리는 코드

不言

Jul 02, 2018 am 11:21 AM

canvas html5

이 글에서는 HTML5에서 Canvas를 사용하여 웃는 얼굴을 그리는 튜토리얼을 주로 소개합니다. Canvas를 사용하여 그리는 것은 HTML5의 기본 기능입니다. 필요하신 분들은 참고하시면 됩니다.

201557180008373.jpg (600×436) 오늘은 Canvas( Canvas) 웹 기술과 문서 객체 모델(종종 DOM이라고 함)과의 연관입니다. 이 기술은 웹 개발자가 JavaScript를 사용하여 HTML 요소에 액세스하고 수정할 수 있도록 하므로 매우 강력합니다.

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

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

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

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

<!DOCTYPE html><body>
   <canvas id=&#39;canvas&#39; width=&#39;640&#39; height=&#39;480&#39;></canvas>
   <script type=&#39;text/javascript&#39; src=&#39;script.js&#39;></script>
</body></html>

로그인 후 복사

설명하기 위해 < html > , 그래서 본문을 통해 문서에 더 많은 요소를 추가할 수 있습니다. 이번 기회에 id 속성이 canvas인 640*480 캔버스 요소를 완성했습니다.

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