찾다

집  >  기사  >  웹 프론트엔드  >  HTML5 Canvas 입문 학습 tutorial_html5 튜토리얼 기술

HTML5 Canvas 입문 학습 tutorial_html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:45:412038검색

HTML5

HTML5란 정확히 무엇인가요? W3C HTML5 FAQ에는 HTML5에 대해 다음과 같이 명시되어 있습니다. HTML5는 개방형 플랫폼에서 개발된 무료 라이센스입니다.
구체적으로 이 문장에 대한 두 가지 이해가 있습니다.
“
은 미래 개방형 네트워크 플랫폼을 구성하는 기술 그룹을 의미하며 이러한 기술에는 HTML5 사양, CSS3, SVG, MATHML, Geolocation, XmlHttpRequest가 포함됩니다. , Context 2D, 웹 글꼴 및 기타 기술은 비공식적이며 시간이 지남에 따라 변경됩니다.
HTML5 사양을 참조하며 확실히 개방형 웹 플랫폼의 일부입니다.

”


캔버스에 대한 브라우저 지원
아래에는 가장 인기 있는 웹 브라우저와 해당 브라우저가 캔버스 요소를 지원하기 시작한 최소 버전 번호가 나열되어 있습니다.


여기에서는 Chrome을 사용하는 것을 권장합니다.

간단한 HTML5 페이지

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  3. <html lang="zh" >
  5. <머리>
  6.  <메타 문자 집합="UTF- 8"> 
  7.  <제목>기본 HTML5 페이지 제목>
  8. 머리>
  10. <몸> 안녕하세요 방송 몸>
  12. html>

데모 실행 결과는 다음과 같습니다.
2016317110813836.jpg (850×500)

HTML은 꺾쇠괄호 <>와 같은 모양의 태그 요소로 구성됩니다. 이러한 태그는 일반적으로 쌍으로 나타나며 태그는 중첩될 수만 있고 교차할 수는 없습니다.
확장:
쌍으로 나타나는 것을 폐쇄형 태그, 단독으로 나타나는 것을 단일 태그라고 합니다. 어떤 일이 있어도 닫힙니다(단일 태그는 닫을 필요가 없지만 XHTML에서는 닫힘이 엄격하게 요구됩니다). 닫는 태그는 시작 태그와 끝 태그로 구분됩니다. 예를 들어 는 시작 태그입니다. 등과 같은 자체 라벨
더 많은 태그를 알아보려면 직접 알아보는 것이 좋습니다. 자율 학습을 위해서는 W3school 플랫폼을 추천합니다.
여기에서는 위 코드에 나타나는 태그에 중점을 둡니다.

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

이 태그는 웹 브라우저가 표준 모드에서 페이지를 렌더링한다는 것을 나타냅니다. 이는 W3C에서 정의한 HTML5 사양에 따른 HTML5 문서에 필요합니다. 이 태그는 다양한 브라우저가 HTML 페이지를 렌더링하는 방식에 있어 오랫동안 지속되어 온 이상한 차이점을 단순화합니다. 일반적으로 문서의 첫 번째 줄입니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <html lang="en" >

언어 설명이 포함된 태그입니다(예: 영어의 경우 "en", 중국어의 경우 "zh").

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <머리>... 머리> 

이 두 개의 마커는 각각 헤더 정보의 시작과 끝을 나타냅니다. 헤더에 포함된 태그는 페이지의 제목, 머리말, 설명 및 기타 내용으로, 내용 자체로 표시되지는 않지만 웹페이지의 표시 효과에 영향을 줍니다. 헤더에서 가장 일반적으로 사용되는 태그는 <title> 태그입니다.

다음 표에는 HTML head 요소 아래의 모든 태그와 기능이 나열되어 있습니다.

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <메타 문자 집합="UTF-8"> 

이 태그는 웹 브라우저에서 사용하는 문자 인코딩 모드를 설명하며, 여기서는 일반적으로 UTF-8로 설정됩니다. 특별한 설정이 필요하지 않으면 변경할 필요가 없습니다. 이는 HTML5 페이지에도 필수 요소입니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <제목>... 제목> 

이 태그는 브라우저 창에 표시되는 HTML의 제목을 설명합니다. 이는 중요한 태그이며 HTML 페이지의 콘텐츠를 색인화하는 데 사용되는 정보 검색 엔진의 주요 부분 중 하나입니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <본체>... 몸> 

웹페이지에 표시되는 실제 콘텐츠는 이 두 개의 <본문> 사이에 포함되어 있습니다.
요약하자면 HTML5 웹페이지는 첫 번째 줄의 과 ;head> 태그 부분과 로 지정된 본문입니다.
이렇게 해서 우리는 가장 간단한 HTML 웹페이지의 기본 구조를 알아냈습니다.

캔버스 추가
HTML에 캔버스를 추가하는 것은 매우 간단합니다. HTML의 부분에 태그를 추가하기만 하면 됩니다. 아래 코드를 참고하시면 됩니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. ><html lang ="zh"><머리> <메타 문자 집합="UTF-8"> ;<제목>기본 HTML5 페이지제목 > 머리>
  2. <몸>
  3.  <캔버스 id="캔버스" >
  4. 브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !
  5.  캔버스>바디> 
  6. html>

결과 페이지는 완전히 빈 페이지이므로 여기에는 사진을 올리지 않겠습니다. 궁금하실 수도 있는데, 왜 공백인가요? (말도 안돼, 아직 그릴 시간도 없었어!) Canvas의 본래 뜻은 캔버스인데, HTML5에서는 캔버스가 투명하고 보이지 않는다.
태그의 텍스트는 무엇을 의미하나요? 즉, HTML 페이지 실행 시 브라우저가 Canvas를 지원하지 않으면 이 텍스트가 표시됩니다. 즉, 브라우저가 Canvas를 지원하는 한 이 텍스트는 페이지에 표시되지 않습니다.
<캔버스>에 있는 ID는 무엇을 의미하나요? id는 태그의 속성 중 하나이며 JavaScript 코드에서 특정 <캔버스>의 이름을 지정하는 데 사용됩니다. 이는 개인의 ID 번호와 마찬가지로 고유합니다.
캔버스를 더 명확하게 표시하고 후속 시연을 용이하게 하기 위해 코드를 약간 수정했으며 이후의 모든 그림은 이 캔버스에 그려집니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html lang="zh" >  
  3. <머리>  
  4. <메타 문자 집합="UTF- 8">  
  5. <제목>基础적 캔버스 제목>  
  6. 머리>  
  7.   
  8. <몸>  
  9. <div id="canvas- 워프">  
  10.     <캔버스 id="캔버스"  스타일="테두리: 1px solid #aaaaaa; 디스플레이: block; 여백: 50px 자동;" 너비="800" 높이=" 600">  
  11.     이런 浏览器居然不支持Canvas?！赶快换一个吧！！   
  12.     캔버스>  
  13. div>  
  14. 몸>    
  15. html>  

실행 결과:
2016317111155702.jpg (850×500)

위 코드에 대한 몇 가지 참고 사항:

1.

태그를 추가하고 그 안에 를 감쌉니다.
2. 태그의 너비 및 높이 속성을 지정하여 너비와 높이를 지정합니다.
3. 태그에 인라인 스타일을 추가하여 블록 수준 요소로 만들어 중앙에 표시합니다.

여기서는 CSS의 내용을 설명하지 않겠습니다. 결국 이 강좌의 핵심은 아니며 이를 확장하려면 많은 지면이 필요할 것입니다.

참조 캔버스 요소


문서 개체 모델(DOM)
문서 개체 모델(DOM)은 확장 가능한 마크업 언어 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다. 문서 객체 모델의 역사는 1990년대 후반 Microsoft와 Netscape 사이의 "브라우저 전쟁"으로 거슬러 올라갑니다. JavaScript와 JScript의 생사를 놓고 경쟁하기 위해 양 당사자는 브라우저에 대규모로 강력한 기능을 부여했습니다. Microsoft는 VBScript, ActiveX 및 Microsoft 고유의 DHTML 형식을 포함하여 많은 독점 기능을 웹 기술에 추가했으며 이로 인해 많은 웹 페이지가 Microsoft가 아닌 플랫폼 및 브라우저를 사용하여 제대로 표시되지 않게 되었습니다. DOM은 당시 양조된 걸작이다.
문서 개체 모델은 HTML 페이지의 모든 개체를 나타냅니다. 언어 중립적이고 플랫폼 중립적입니다. 웹 브라우저에서 페이지를 렌더링한 후 페이지의 콘텐츠와 스타일을 다시 업데이트할 수 있습니다. 사용자는 JavaScript를 통해 DOM에 액세스할 수 있습니다.
<캔버스>를 사용하기 전에 먼저 두 가지 특정 DOM 개체인 창과 문서를 이해해야 합니다.

창 개체는 DOM의 최고 수준입니다. 캔버스 애플리케이션을 사용하기 전에 모든 리소스와 코드가 로드되었는지 확인하려면 이 개체를 감지해야 합니다.
문서 개체에는 HTML 페이지의 모든 HTML 태그가 포함되어 있습니다. JavaScript를 사용하여 조작되는 의 인스턴스를 찾으려면 이 개체를 검색해야 합니다.

JavaScript 배치 위치
JavaScript를 사용하여 Canvas를 프로그래밍하면 문제가 발생합니다. 생성된 페이지에서 JavaScript 프로그램을 시작할 위치가 어디입니까?
JavaScript를 HTML 페이지의 최근 추세는 HTML 문서 끝의 태그 앞에 JavaScript를 배치하여 JavaScript가 실행되는 동안 전체 페이지가 로드되도록 하는 것입니다. 그러나 프로그램을 실행하기 전에 페이지가 로드되는지 테스트하기 위해 JavaScript를 사용해야 하므로 JavaScript를 <head>에 배치하는 것이 가장 좋습니다.
그렇지만 일반적인 경로를 따르지 않아서(웃음), 이후의 경우에는 여전히 제 코딩 스타일에 따라 끝에 JavaScript 코드를 넣습니다. 물론, 자바스크립트 코드가 많다면 외부 .js 파일을 로딩하는 것이 좋습니다. 코드는 대략 다음과 같습니다.

JavaScript 코드클립보드에 콘텐츠 복사
  1. <스크립트 유형="text/javascript" src="bootstarp.js" >

실제 프로젝트 개발에서는 HTML, CSS, JS가 완전히 분리되어 있습니다. 다만, 사례 시연에 사용되는 코드가 조금 적어서 대부분 외부 .js 파일을 로딩하는 방식을 사용하지 않습니다.


캔버스 개체 가져오기
캔버스 개체 가져오기는 실제로 한 문장에 불과합니다.

JavaScript 코드클립보드에 콘텐츠 복사
  1. var canvas = document.getElementById("캔버스")

Var는 변수 정의에 사용됩니다. JS는 약한 유형의 언어이므로 var는 모든 변수를 정의하는 데 사용됩니다. var 뒤에 오는 캔버스는 변수입니다. 문서 개체의 getElementById() 메서드를 사용하여 ID별로 개체를 가져옵니다. 이전에는 태그에 canvas라는 ID를 부여했으므로 이 문장의 마지막 캔버스는 (좀 헷갈리시죠? 몇 번 읽어야 이해가 되실 겁니다.)
브러시 구하기(2D 환경)
먼저 그리려면 무엇이 필요할까요? 화필. 캔버스 브러시를 얻는 것도 한 문장이면 됩니다. 방금 얻은 캔버스 객체를 직접 사용하고 해당 객체의 getContext("2d") 메서드를 호출하면 됩니다.

JavaScript 코드클립보드에 콘텐츠 복사
  1. var context = canvas.getContext("2d")

여기서의 맥락은 브러시입니다.
다른 튜토리얼에서는 2D 환경이라는 용어를 사용하는 것이 더 생생한 것 같습니다. 영감은 Java의 Graphics 클래스의 g 브러시에서 나오며 원리는 동일합니다.


요약
준비에는 세 단계만 있습니다:

1. 캔버스 배치: 태그를 추가하여 캔버스 요소 추가
2. 캔버스 가져오기: 태그의 ID를 통해 캔버스 개체 가져오기
브러시 가져오기: 캔버스 객체 getContext("2d") 메소드를 통해 2D 환경 가져오기

에 해당하는 코드는 세 문장입니다:

JavaScript 코드클립보드에 콘텐츠 복사
  2. var canvas = document.getElementById("캔버스");
  3. var context = canvas.getContext("2d")
완전한 코드는 다음과 같습니다.


JavaScript 코드
클립보드에 콘텐츠 복사
  2. "zh">
    4. "UTF-8"> <title>기본 캔버스
    8. "canvas-warp"
  8. > "canvas"
    9. style=
  9. "border: 1px solid #aaaaaa; 디스플레이: block; 여백: 50px auto ;" 너비="800" 높이="600"> 브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !
    • <스크립트>
    • window.onload =
  • 함수
    • (){
  • var
    • canvas = document.getElementById(
  • "canvas"); var context = canvas.getContext(
    • "2d"
  • ); }
  • 몇 가지 참고 사항: 1.JavaScript 코드는 <script> 태그로 래핑되어야 합니다.
    • 2.window.onload = function(){}은 페이지를 로드한 후 즉시 실행됩니다. 즉, 페이지가 로드되어 실행된 후 함수 본문의 내용을 의미합니다.
    이제 캔버스와 브러시가 준비되었습니다. 다음으로 브러시(컨텍스트 개체)를 사용하여 고화질 이미지를 그려보겠습니다! 깨우다! 예술가의 영혼!

    2016317111405657.png (1433×771)

    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：HTML5 Canvas 기본 선 그리기 예제 tutorial_html5 튜토리얼 기술다음 기사：HTML5 Canvas 기본 선 그리기 예제 tutorial_html5 튜토리얼 기술

    관련 기사

    더보기