Canvas

canvas 요소를 사용하면 해상도 종속적인 비트맵 canvas에 그래픽을 렌더링할 수 있습니다.canvas에 그리기 위해 HTML Canvas 2D 컨텍스트(영문) 사양에 지정된 Canvas 2D 컨텍스트 등의 "컨텍스트"가 사용됩니다. Windows Internet Explorer 9은 2D Canvas 그리기 API를 컨텍스트로 사용하여 canvas 요소를 새롭게 지원했습니다. Internet Explorer 9에서 Canvas 2D 컨텍스트는 CanvasRenderingContext2D 개체나 ICanvasRenderingContext2D 인터페이스로 나타냅니다. Internet Explorer 9의 모든 그래픽과 마찬가지로 canvas는 Windows 및 GPU를 사용하여 하드웨어 가속됩니다.

Canvas는 사각형, 경로, 선, 채우기, 호, 베지어 및 정방형 곡선을 포함하는 그리기 시나리오를 가능하게 합니다. 또한 Internet Explorer 9의 canvas는 widthheight 특성을 지원합니다. width 및 height의 기본값은 각각 300픽셀과 150픽셀이고 기본 색은 투명한 검은색입니다.

Canvas는 웹에 그래픽을 프로그래밍하는 방법입니다. canvas 태그는 "직접 실행 모드"(그리기 명령이 그래픽 하드웨어에 직접 전송됨) 2D 그리기 화면이며, 별도의 플러그 인을 다운로드할 필요 없이 실시간 그래프, 애니메이션 또는 대화형 게임을 제공하는 데 사용할 수 있습니다. CanvasRenderingContext2D 개체에 의해 정의된 API 때문에 canvas는 다음을 포함하는 그리기 시나리오를 가능하게 합니다.

JavaScript를 사용하여 canvas 그리기에 애니메이션 효과를 주거나 키보드 입력, 마우스 클릭 또는 브라우저 이벤트에 반응할 수 있는 대화형 환경을 만들 수 있습니다. 예를 들어 Internet Explorer 테스트 드라이브 사이트의 이 예제(영문)에서는 몇 줄의 JavaScript만 사용하여 임의로 배치되고 반짝이는 컬러 선을 생성합니다.

Internet Explorer 9 이상 버전에서는 다음과 같은 Canvas 2D 컨텍스트 API(CanvasRenderingContext2D 개체에 의해 노출되는 멤버)를 지원합니다.

IE11부터 다음 캔버스 2D 컨텍스트, 수준 2 API도 지원됩니다.

  • msImageSmoothingEnabled 속성 - 작은 이미지를 확대하는 경우 기존의 쌍선형 크기 조정 또는 가장 인접한 항목 조정 중에 선택할 수 있습니다.
  • 캔버스 fill, clipisPointInPath 메서드에서 even-odd 채우기 규칙 값을 지원합니다. W3C 표준 채우기 규칙 특성뿐 아니라 IE11에서는 전역 채우기 규칙 속성인 msFillRule을 제공합니다. 이 속성은 각각에 대해 개별적으로 채우기 규칙을 설정하는 대신 모든 메서드의 채우기 규칙을 설정합니다.
  • setLineDash, getLineDashlineDashOffset 메서드 - 사용자 지정 스트로크 파선 패턴을 만드는 데 사용합니다.

API 참조

Canvas

샘플 및 자습서

Canvas를 사용하여 3D 그래픽을 만드는 방법
2D 좌표계 간에 점을 매핑하는 방법
Canvas 특수 효과를 만드는 방법
Canvas를 사용하여 이미지 색 샘플링
Canvas를 사용하여 우주 게임을 만드는 방법
SVG 및 Canvas 중에서 선택하는 방법
SVG 및 Canvas의 사용 예

Internet Explorer 테스트 드라이브 데모

Canvas 패드
Canvas 핀볼
Canvas 확대/축소
은하계 HTML5 성능 테스트
HTML5 눈보라
Mr. Potato Gun
입자 가속

IEBlog 게시물

은하계: HTML5를 사용하여 3D 태양계 빌드
기본 HTML5: 다운로드할 수 있는 첫 번째 IE10 Platform Preview
HTML5 눈보라: 동작의 전체 하드웨어 가속
일반적인 Canvas 문제 디버그
IE9에 하드웨어 가속 Canvas 포함
Canvas 및 SVG 사용 시기에 대한 고려 사항

사양

HTML 캔버스 2D 컨텍스트

관련 항목

HTML 5 Canvas 요소 소개
Disney TRON의 백그라운드 작업: HTML5를 사용하여 디지털 책 사이트를 빌드하는 방법
HTML5 Canvas에 대한 개발자 가이드
HTML5 Canvas에서 시각적 이미지 라이브러리를 만드는 방법
HTML5 SVG 및 Canvas를 사용하여 BrikBloc 게임을 작성하는 방법
Impact HTML5 게임 엔진을 사용하여 소행성을 빌드하는 방법
HTML5 Canvas 게임 현대화: 1부, 하드웨어 크기 조정 및 CSS3
HTML5 Canvas 게임 현대화: 2부, 오프라인, 끌어서 놓기 및 파일 API
HTML5 게임: EaselJS를 사용하여 Canvas의 스프라이트에 애니메이션 효과를 주는 방법
하드웨어 가속 HTML5 Canvas 기능 활용

 

 

표시:
© 2014 Microsoft. All rights reserved.