이 요소에는 다른 기술보다 이점이 있습니다.
HTML5에는 CANVAS라는 재미있는 요소가 포함되어 있습니다. 그것은 많은 용도를 가지고 있지만, 그것을 사용하기 위해서는 자바 스크립트, HTML 및 때로는 CSS를 배워야합니다.
이로 인해 CANVAS 요소는 많은 디자이너들에게는 조금 까다 롭습니다. 실제로 JavaScript를 모른 채 CANVAS 애니메이션과 게임을 만들 수있는 신뢰할 수있는 도구가있을 때까지는 대부분이 요소를 무시할 것입니다.
HTML5 캔버스가 사용되는 것
HTML5 CANVAS 요소는 이전에 Flash와 같은 임베디드 응용 프로그램을 사용하여 생성해야했던 많은 작업에 사용할 수 있습니다.
- 동적 그래픽
- 온라인 및 오프라인 게임
- 애니메이션
- 양방향 비디오 및 오디오
실제로 사람들이 CANVAS 요소를 사용하는 가장 큰 이유는 일반 웹 페이지를 동적 웹 응용 프로그램으로 변환 한 다음 해당 응용 프로그램을 스마트 폰 및 태블릿에서 사용할 모바일 응용 프로그램으로 변환하는 것이 얼마나 쉬운가 때문입니다.
우리에게 플래시가 있다면 왜 우리는 캔버스가 필요한가요?
HTML5 사양에 따르면 CANVAS 요소는 다음과 같습니다.
"... 그래프, 게임 그래픽, 미술 또는 기타 시각적 이미지를 즉시 렌더링하는 데 사용할 수있는 해상도 종속 비트 맵 캔버스입니다."CANVAS 요소를 사용하면 그래프, 그래픽, 게임, 미술 및 기타 시각 자료를 웹 페이지에서 실시간으로 그릴 수 있습니다.
Flash로 이미 그렇게 할 수 있다고 생각할 수도 있지만 CANVAS와 Flash의 두 가지 주요 차이점이 있습니다.
- CANVAS 요소는 HTML에 바로 포함됩니다. 그 위에 그려지는 스크립트는 HTML 또는 링크 된 외부 파일에 있습니다. 이는 CANVAS 요소가 문서 개체 모델 또는 DOM의 일부임을 의미합니다.
- Flash는 내장 된 외부 파일입니다. EMBED 또는 OBJECT 요소를 사용하여 표시하고 다른 HTML 요소와 직접 상호 작용할 수 없습니다. CANVAS 요소는 DOM의 일부이기 때문에 다양한 방식으로 DOM과 상호 작용할 수 있습니다.
- 예를 들어, 양식 요소가 채워지는 등 페이지의 다른 부분이 상호 작용할 때 변경되는 애니메이션을 만들 수 있습니다. Flash를 사용하면 Flash 동영상이나 애니메이션을 시작할 수 있지만, CANVAS를 사용하면 양식 필드의 텍스트를 애니메이션에 추가하는 등 다양한 효과를 만들 수 있습니다.
- CANVAS 요소는 기본적으로 웹 브라우저에서 지원됩니다. 사용자가 실제로 Flash를 사용하려면 브라우저에 플러그인이 설치되어 있어야합니다. 이것은 종종 구식 플래시 설치 또는 운영 체제가 단순히 지원하지 않기 때문에 대부분의 사람들에게 번거로운 일입니다.
- 예전에는 모든 브라우저에 플러그인이 설치되어 있었지만, 더 이상 그렇지 않은 경우가 많았으며 많은 경우 어려움으로 인해 플러그인을 제거하기까지했습니다. 또한 인기있는 iOS 플랫폼에서도 사용할 수 없습니다.
캔버스는 플래시를 사용하지 않으려 고해도 유용합니다.
CANVAS 요소가 너무 혼란스러운 주된 이유 중 하나는 많은 디자이너가 완전히 정적 인 웹에 익숙해졌습니다. 이미지가 애니메이션으로 표시 될 수도 있지만 GIF로 끝났습니다. 물론 페이지에 비디오를 삽입 할 수는 있지만 정적 인 비디오이기 때문에 페이지에 간단하게 앉아서 상호 작용으로 시작하거나 멈출 수 있습니다.
CANVAS 요소를 사용하면 스크립트 언어를 사용하여 그래픽, 이미지 및 텍스트를 동적으로 제어 할 수 있으므로 웹 페이지에 훨씬 더 많은 상호 작용 기능을 추가 할 수 있습니다. CANVAS 요소를 사용하면 이미지, 사진, 차트 및 그래프를 애니메이션 요소로 변환 할 수 있습니다.
Canvas 요소 사용을 고려해야하는 경우
CANVAS 요소 사용 여부를 결정할 때 청중이 가장 먼저 고려해야 할 사항입니다.
잠재 고객이 Windows XP 및 IE 6, 7 또는 8을 주로 사용하는 경우 동적 캔버스 기능을 만들면 브라우저가 지원하지 않으므로 무의미한 상태가 될 것입니다.
Windows 시스템에서만 사용되는 응용 프로그램을 빌드하는 경우 Flash가 최선의 방법 일 수 있습니다. Windows 및 Mac 컴퓨터에서 사용할 응용 프로그램은 Silverlight 응용 프로그램의 이점을 얻을 수 있습니다.
그러나 최신 데스크톱 버전뿐만 아니라 모바일 장치 (Android 및 iOS)에서 응용 프로그램을 볼 필요가있는 경우 CANVAS 요소를 사용하는 것이 좋습니다.
이 요소를 사용하면 이전 브라우저에서 지원하지 않는 정적 이미지와 같은 대체 옵션을 사용할 수 있습니다.
그러나 HTML5 캔버스를 모든 용도로 사용하는 것은 좋지 않습니다. 로고, 헤드 라인 또는 탐색과 같은 용도로 사용해서는 안됩니다 (이 중 일부를 움직이게해도 괜찮습니다).
명세에 따르면, 빌드하려는 것에 가장 적합한 요소를 사용해야합니다. 따라서 HEADER 요소를 이미지 및 텍스트와 함께 사용하면 머리글 및 로고의 CANVAS 요소보다 바람직합니다.
또한 인쇄와 같이 비대화 형 매체에서 사용하려는 웹 페이지 또는 응용 프로그램을 만들 경우 동적으로 업데이트 된 CANVAS 요소가 예상대로 인쇄되지 않을 수 있음을인지해야합니다. 현재 내용이나 대체 내용을 인쇄 할 수 있습니다.