이 기사는 주로 HTML5에서 캔버스를 사용하여 웃는 얼굴을 그리는 자습서를 소개합니다. 도면에 캔버스를 사용하는 것은 HTML5에서 기본 기능입니다. 필요한 친구는 그것을 참조 할 수 있습니다
오늘날, 당신은 캔버스라는 웹 기술과 문서 객체 모델 (종종 DOM이라고 함)과의 연관성을 배울 것입니다. 이 기술은 웹 개발자가 JavaScript를 사용하여 HTML 요소에 액세스하고 수정할 수 있기 때문에 매우 강력합니다.
이제 왜 우리가 JavaScript를 과감하게 사용해야하는지 궁금 할 것입니다. 요컨대, HTML 및 JavaScript는 상호 의존적이며 Canvas 요소와 같은 일부 HTML 구성 요소는 JavaScript에서만 사용할 수 없습니다. 결국, 우리가 그것을 끌 수 없다면, 캔버스는 무엇을 할 수 있습니까?
이 개념을 더 잘 이해하기 위해 샘플 프로젝트로 간단한 스마일 얼굴을 그려야합니다. 시작합시다.
시작
먼저 새 디렉토리를 만들어 프로젝트 파일을 저장 한 다음 좋아하는 텍스트 편집기 또는 웹 개발 도구를여십시오. 이렇게하면 빈 색인을 만들어야합니다. html과 빈 script.js가 계속 편집됩니다.
다음으로, 프로젝트의 대부분의 코드가 JavaScript로 작성되기 때문에 많은 것들이 포함되지 않는 index.html 파일을 수정합시다. HTML에서해야 할 일은 캔버스 요소와 참조 script.js를 만드는 것입니다.
XML/HTML 코드 복사 컨텐츠를 클립 보드에 복사합니다