HTML page_html5 튜토리얼 팁에 캔버스 태그를 추가하는 예

HTML 페이지의

에서 다음 코드를 사용하여 태그를 추가할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

귀하의 브라우저는 HTML5 Canvas를 지원합니다.

번역 참고: 캔버스의 경우 다음 쓰기가 허용되지 않습니다.

코드 복사

코드는 다음과 같습니다.

위 코드가 어떤 역할을 하는지 살펴보겠습니다. 태그에는 다음과 같은 세 가지 주요 속성이 있습니다.

1.id. id 값을 사용하여 JavaScript 코드에서 태그를 참조할 수 있습니다. 위 코드에서 id 값은 canvasOne입니다.
2.폭. 캔버스의 너비(픽셀)입니다. 위 코드에서 너비 값은 500픽셀입니다.
3.높이. 캔버스의 높이(픽셀)입니다. 위 코드에서 높이 값은 300픽셀입니다.

Canvas의 시작 태그

사이에 HTML 웹 페이지를 여는 브라우저가 Canvas를 지원하지 않는 경우 이 텍스트가 Canvas에 표시됩니다. 라벨이 위치한 곳. 위 코드에서는 "귀하의 브라우저는 HTML5 Canvas를 지원하지 않습니다."라는 텍스트를 사용하고 있습니다.

문서 개체를 사용하여 JavaScript에서 캔버스 요소 참조

HTML 페이지가 로드되면 문서 객체는 페이지의 모든 요소를 ​​참조하므로 DOM을 사용하여 위 코드에 정의된

Canvas 인터페이스를 사용하여 그림을 표시할 위치를 파악하려면 Canvas 개체에 대한 참조가 필요합니다.

먼저 Canvas 개체에 대한 참조를 보유하기 위해 theCanvas라는 변수를 정의합니다.

그런 다음 문서 객체의 getElementById() 함수를 호출하고 수신 매개변수를 canvasOne(HTML 페이지의 태그 ID)으로 설정하여 캔버스 객체를 얻습니다.

코드 복사

코드는 다음과 같습니다.

var theCanvas = document.getElementById("canvasOne");