canvas, SVG 및 CSS3와 함께 그래픽 사용(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
이 섹션에는 JavaScript를 사용하는 Windows 스토어 앱에서의 그래픽 사용에 대한 정보를 제공합니다.
이 조항의 내용
| 항목 | 설명 |
|---|---|
캔버스 요소는 페이지에 사각 비트맵 캔버스를 생성합니다. 이 캔버스에 JavaScript를 사용하여 그래픽 이미지를 즉석에서 그릴 수 있습니다. 이 캔버스는 실시간으로 그래픽을 생성하거나 정기적으로 그래픽을 변경하는 경우 또는 게임을 만들 때 매우 유용합니다. |
|
캔버스 요소는 애니메이션, 그래픽, 게임 등의 그래픽 생성을 위해 JavaScript를 사용할 수 있는 HTML 문서 상의 그리기 가능한 영역입니다. 이 항목은 캔버스 요소를 사용하여 기본 그리기에 애니메이션 효과를 주는 데 필요한 단계에 대해 설명하는 것으로 시작합니다. |
|
모양과 선을 단색으로만 해야 하는 것은 아닙니다. 캔버스에 사용되는 그라데이션은 실제로 색 값 유형이므로 fillStyle 및 strokeStyle 속성에 적용할 수 있습니다. 그라데이션은 이미지에서 농도 또는 색의 방향 변화를 만드는 데 사용할 수 있습니다. 이것은 배경 이미지를 만들거나 지도에서 고도를 표시하거나 평면에 조명과 음영을 추가할 때 유용합니다. 그라데이션을 사용하면 이 효과를 내기 위해 이미지를 사용할 필요가 없고 로드에 소요되는 대역폭과 시간을 최소화할 수 있으므로 웹앱을 간소화하는 데 유용합니다. 또한 그라데이션은 프로그래밍 방식으로 생성되므로 배율을 변경하고 재사용하기가 쉽습니다. |
|
canvas 요소는 애니메이션, 그래픽, 게임 등의 그래픽 생성을 위해 JavaScript를 사용할 수 있는 HTML 문서 상의 그리기 가능한 영역입니다. 이 항목에서는 먼저 canvas 요소를 사용하여 이미지를 표시하는 데 필요한 단계에 대해 설명합니다. |
Windows 스토어 앱에서 CSS 및 SVG 캔버스를 사용하여 빠른 경량 벡터 그래픽을 추가하고 UI에 애니메이션 효과를 줄 수 있습니다.
SVG 또는 캔버스를 사용하여 거의 모든 벡터 그래픽을 그릴 수 있지만, 때로는 작업에 따라 컴퓨터나 개발자가 해야 할 일이 너무 많아질 수도 있습니다.
CSS3(CSS 스타일시트, Level 3) 2D 변형을 사용하여 2D 공간에서 개체를 좌표 이동(이동)하거나 회전할 수 있으며, 크기 조정하거나 기울일 수도 있습니다. CSS3 3D 변형 지원은 3D 공간에서 이와 동일한 변형 기능을 지원하며 원금값 있는 변형을 통해 깊이감을 시뮬레이션할 수 있는 기능도 제공합니다.
여러 변형을 개별적으로 지정하는 경우 변형 결과가 누적되며 적용되는 순서에 따라 달라집니다.