댓글 : HTML5는 새로운 레이블을 소개 하며이 레이블로 표시되는 영역은 캔버스와 같습니다. 모든 그래픽 도면은 끝에이 캔버스에 제시되어야합니다. 이 태그를 사용하면 브라우저의 그래픽 표현성이 크게 향상되었습니다. Flash와 Silverlight가 위협을 느끼나요?
1. <canvas> 태그HTML5는 새로운 <canvas> 태그를 소개하며,이 태그로 표시되는 영역은 캔버스와 같으며 모든 그래픽 도면 이이 캔버스에 제시되어야합니다. 이 태그를 사용하면 브라우저의 그래픽 표현성이 크게 향상되었습니다. Flash와 Silverlight가 위협을 느끼나요?
뉴스 링크 : Google은 Chrome 7 브라우저가 60 배 더 빠르게 상승 할 것이라고 주장합니다.
<canvas> 태그의 사용은 다음과 같이 매우 간단합니다.
<canvas>
브라우저는 캔버스 태그를 지원하지 않습니다
</캔버스>
<canvas> 태그와 일반 HTML 태그 사이에는 큰 차이가 없습니다. 너비와 높이를 설정할 수 있으며 CSS를 통해 배경색, 테두리 스타일 등을 설정할 수 있습니다.
<canvas> 태그에 대한 자세한 내용은 여기를 참조하십시오.
태그 중간의 내용은 교체 내용입니다. 사용자의 브라우저가 <canvas> 태그를 지원하지 않으면 컨텐츠가 표시됩니다. 사용자의 브라우저가 <canvas> 태그를 지원하면 컨텐츠가 무시됩니다.
위의 <canvas> 코드는 다음 효과를 표시합니다.
브라우저는 캔버스 태그를 지원하지 않습니다
IE 브라우저를 사용하는 경우 프롬프트 만 표시 될 수 있습니다. Google Chrome 또는 Firefox 브라우저를 사용하는 경우 빨간 사각형 영역을 볼 수 있습니다.
2. 렌더링 컨텍스트
실제로 <canvas> 태그로 아무것도 할 수 없습니다. Windows 프로그래밍을 연주 한 학생들은 Windows에서 그리기에서 먼저 장치 컨텍스트 DC를 가져와야하며 <canvas> 태그를 그릴 때는 렌더링 컨텍스트를 가져와야한다는 것을 알고 있습니다. 우리의 그래픽은 화면에서 직접 그려지는 것이 아니라 먼저 컨텍스트 (컨텍스트)에서 화면에서 새로 고침됩니다.
오프 주제 : 왜 그런 복잡한 맥락으로 개념을 정리해야합니까? 컨텍스트 객체로 인해 다양한 그래픽 장치가 눈에서 동일하게 보이게 할 수 있습니다. 우리는 그리기에만 집중하면서 운영 체제와 브라우저가 다른 작업에 대해 걱정할 필요가 있습니다. 무뚝뚝하게 말하면 모든 종류의 콘크리트를 통일 된 추상화로 바꾸어 우리의 부담을 줄입니다.
컨텍스트를 얻는 것은 매우 간단합니다. 다음과 같이 두 줄의 코드 만 있으면됩니다.
var canvas = document.getElementById ( '튜토리얼');
var ctx = canvas.getContext ( '2d');
먼저 Canvas 객체를 가져온 다음 Canvas 객체의 getContext 메소드를 호출하십시오. 이 방법은 현재 파라미터 2D로만 전달할 수 있습니다. 가까운 시일 내에 파라미터 3D를 지원할 수 있습니다. 당신은 그것이 무엇을 의미하는지 이해해야합니다. 기대합시다.
getContext 메소드는 CanvasRenderingContext2D 객체, 즉 렌더링 컨텍스트 객체를 반환합니다. 여기에서 더 많은 정보를 찾을 수 있으며, 모두 몇 가지 드로잉 방법입니다.
3. 브라우저 지원
지원되지 않는 브라우저에 대체 컨텐츠를 표시하는 것 외에도 브라우저가 스크립트를 통해 캔버스를 지원하는지 확인할 수 있습니다. 이 방법은 매우 간단합니다. getContext 기능이 존재하는지 판단하십시오. 코드는 다음과 같습니다.
var canvas = document.getElementById ( '튜토리얼');
if (canvas.getContext) {
Alert ( "support <canvas> 태그");
} 또 다른 {
경고 ( "지원되지 않음 <canvas> 태그");
}
4. 작은 예
아래에서 위아래로 선을 이동하는 예는 HTML5의 드로잉 기능을 사용하여 입증됩니다. 특정 코드는 후속 컨텐츠에 제공됩니다.
브라우저는 <canvas> 태그를 지원하지 않으며 Chrome 또는 Firefox 브라우저를 사용하십시오.