오늘은 캔버스라는 웹 기술과 문서 개체 모델(일반적으로 DOM이라고 함)과의 연관성에 대해 알아봅니다. 이 기술은 웹 개발자가 JavaScript를 사용하여 HTML 요소에 액세스하고 수정할 수 있도록 하므로 매우 강력합니다.
이제 왜 JavaScript를 활용해야 하는지 궁금하실 것입니다. 즉, HTML과 JavaScript는 상호 의존적이며 캔버스 요소와 같은 일부 HTML 구성 요소는 JavaScript와 독립적으로 사용할 수 없습니다. 결국 캔버스에 그림을 그릴 수 없다면 캔버스가 무슨 소용이 있겠습니까?
이 개념을 더 잘 이해하기 위해 샘플 프로젝트를 통해 간단한 웃는 얼굴을 그려 보겠습니다. 시작해 봅시다.
시작
새 디렉토리를 만들어 프로젝트 파일을 저장한 다음 즐겨 사용하는 텍스트 편집기나 웹 개발 도구를 엽니다. 이 작업을 수행한 후에는 빈 index.html과 빈 script.js를 생성해야 하며 나중에 계속해서 편집할 것입니다.
다음으로 index.html 파일을 수정해 보겠습니다. 프로젝트의 코드 대부분이 JavaScript로 작성되므로 별 문제는 없습니다. HTML에서 해야 할 일은 캔버스 요소와 참조 script.js를 만드는 것입니다. 이는 매우 간단합니다.
설명하자면 본문을 통해 문서에 더 많은 요소를 추가할 수 있도록 태그 세트를 사용합니다. 이번 기회에 id 속성이 canvas인 640*480 캔버스 요소를 완성했습니다.
이 속성은 고유한 식별을 위해 요소에 문자열을 추가할 뿐입니다. 나중에 이 속성을 사용하여 JavaScript 파일에서 캔버스 요소를 찾습니다. 다음으로 JavaScript 언어 유형과 script.js 파일 경로를 지정하는 <script> 태그를 사용하여 JavaScript 파일을 참조합니다. <br />DOM 조작</script>
이름이 "Document Object Model"이므로 다른 언어를 사용하여 인터페이스를 호출하여 HTML 문서에 액세스해야 합니다. 여기서 사용하는 언어는 JavaScript입니다. 이렇게 하려면 내장 문서 개체에 간단한 참조를 배치해야 합니다. 이 개체는 태그와 직접적으로 일치하며, 마찬가지로 요소에 액세스하고 이를 통해 변경 작업을 수행할 수 있으므로 전체 프로젝트의 기초가 됩니다.
캔버스 요소를 정의하기 위해 id="canvas"를 어떻게 사용했는지 기억하시나요? 이제 document.getElementById 메소드를 사용하여 HTML 문서에서 이 요소를 가져오고 필요한 요소 ID와 일치하는 문자열을 전달하기만 하면 됩니다. 이제 이 요소를 얻었으므로 이를 사용하여 페인팅을 시작할 수 있습니다.
캔버스로 그림을 그리려면 캔버스의 맥락을 조작해야 합니다. 놀랍게도 캔버스에는 그리기를 위한 메서드나 속성이 포함되어 있지 않지만 해당 컨텍스트 개체에는 필요한 모든 메서드가 있습니다. 컨텍스트 정의는 다음과 같습니다.
시작하기 전에 컨텍스트에는 두 가지 색상 속성, 즉 획과 채우기에 대한 속성이 저장된다는 점을 알려드리고 싶습니다. 웃는 얼굴의 경우 채우기를 노란색으로 설정하고 브러시를 검은색으로 설정해야 합니다.
스크립트가 작동하기 위해 경로를 닫을 필요는 없지만 웃는 얼굴의 새로운 눈과 입을 그릴 수 있도록 경로를 닫아야 합니다. 눈도 같은 방식으로 만들 수 있으며 각 눈에는 더 작은 반경과 다른 위치가 필요합니다. 하지만 먼저 채우기 색상을 흰색으로 설정해야 한다는 것을 기억해야 합니다.
위 내용은 모두 눈에 대한 코드입니다. 이제 입은 매우 유사하지만 이번에는 호를 채우지 않고 각도를 반원으로 구성합니다. 이렇게 하려면 시작 각도를 0으로 설정하고 끝 각도를 -1 * Math.PI로 설정해야 합니다. 브러시 색상을 빨간색으로 설정하는 것을 잊지 마십시오.
축하드립니다
잘했어요. 이 튜토리얼을 완료하고, 멋진 웃는 얼굴을 만들고, 캔버스, HTML, JavaScript 및 문서 개체 모델에 대해 자세히 배웠습니다. 궁금한 점이 있으시면 메시지를 남겨주세요.