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

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

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

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

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

1. /span>>본문>
3.  캔버스 id='캔버스' 너비='640' 높이='480'>캔버스>
4.  스크립트 유형='text/ javascript' src='script.js'> 스크립트>
6. 본문>html>

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

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

이름이 "Document Object Model"이므로 다른 언어를 사용하여 인터페이스를 호출하여 HTML 문서에 액세스해야 합니다. 여기서 사용하는 언어는 JavaScript입니다. 이렇게 하려면 내장 문서 개체에 간단한 참조를 배치해야 합니다. 이 개체는 태그와 직접적으로 일치하며, 마찬가지로 요소에 액세스하고 이를 통해 변경 작업을 수행할 수 있으므로 전체 프로젝트의 기초가 됩니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. var 캔버스 = 문서.getElementById('canvas')

캔버스 요소를 정의하기 위해 id="canvas"를 어떻게 사용했는지 기억하시나요? 이제 document.getElementById 메소드를 사용하여 HTML 문서에서 이 요소를 가져오고 필요한 요소 ID와 일치하는 문자열을 전달하기만 하면 됩니다. 이제 이 요소를 얻었으므로 이를 사용하여 페인팅을 시작할 수 있습니다.

캔버스로 그림을 그리려면 캔버스의 맥락을 조작해야 합니다. 놀랍게도 캔버스에는 그리기를 위한 메서드나 속성이 포함되어 있지 않지만 해당 컨텍스트 개체에는 필요한 모든 메서드가 있습니다. 컨텍스트 정의는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. var 컨텍스트 = 캔버스.getContext('2d'); >

각 캔버스에는 프로그램 목적에 따라 여러 가지 컨텍스트가 있습니다. 단 하나의 2D 컨텍스트이면 웃는 얼굴을 만드는 데 필요한 모든 그리기 방법에 액세스할 수 있습니다.

시작하기 전에 컨텍스트에는 두 가지 색상 속성, 즉 획과 채우기에 대한 속성이 저장된다는 점을 알려드리고 싶습니다. 웃는 얼굴의 경우 채우기를 노란색으로 설정하고 브러시를 검은색으로 설정해야 합니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. context.fillStyle = '노란색'
2. context.StrokeStyle = '검은색'

문맥에 맞는 색상을 설정한 후 얼굴에 원을 그려야 합니다. 안타깝게도 컨텍스트 내 원에 대해 미리 정의된 방법이 없으므로 소위 경로를 사용해야 합니다. 경로는 단순히 일련의 연결된 선과 곡선이며, 그리기가 완료되면 경로가 닫힙니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. context.beginPath()
context.arc(320, 240, 200, 0, 2 * Math.PI)
context.fill()
컨텍스트.스트로크()
context.closePath()

이렇게 설명하면 컨텍스트를 사용하여 새로운 경로를 시작합니다. 다음으로 점 (320, 240)에 반경 200픽셀의 호를 만듭니다. 마지막 두 매개변수는 호를 만들 초기 각도와 최종 각도를 지정하므로 0과 2 *Math.PI를 전달하여 완전한 원을 만듭니다. 마지막으로 컨텍스트를 사용하여 설정한 색상을 기반으로 경로를 채우고 그립니다.

스크립트가 작동하기 위해 경로를 닫을 필요는 없지만 웃는 얼굴의 새로운 눈과 입을 그릴 수 있도록 경로를 닫아야 합니다. 눈도 같은 방식으로 만들 수 있으며 각 눈에는 더 작은 반경과 다른 위치가 필요합니다. 하지만 먼저 채우기 색상을 흰색으로 설정해야 한다는 것을 기억해야 합니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. context.fillStyle = '흰색'
3. context.beginPath()
4. context.arc(270, 175, 30, 0, 2 * Math.PI)
5. context.fill()
6. 컨텍스트.스트로크()
7. context.closePath()
9. context.beginPath()
10. context.arc(370, 175, 30, 0, 2 * Math.PI)
11. context.fill()
12. 컨텍스트.스트로크()
13. context.closePath()

위 내용은 모두 눈에 대한 코드입니다. 이제 입은 매우 유사하지만 이번에는 호를 채우지 않고 각도를 반원으로 구성합니다. 이렇게 하려면 시작 각도를 0으로 설정하고 끝 각도를 -1 * Math.PI로 설정해야 합니다. 브러시 색상을 빨간색으로 설정하는 것을 잊지 마십시오.

XML/HTML 코드클립보드에 콘텐츠 복사

1. context.fillStyle = '빨간색'
3. context.beginPath()
4. context.arc(320, 240, 150, 0, -1 * Math.PI)
5. context.fill()
6. 컨텍스트.스트로크()
7. context.closePath()

축하드립니다

잘했어요. 이 튜토리얼을 완료하고, 멋진 웃는 얼굴을 만들고, 캔버스, HTML, JavaScript 및 문서 개체 모델에 대해 자세히 배웠습니다. 궁금한 점이 있으시면 메시지를 남겨주세요.