html5의 그리기 방법은 무엇입니까

HTML5의 그리기 방법: 1. 픽셀을 기반으로 하고 2D 그리기 기능을 제공하며 HTML을 사용하고 스크립트를 통해 패턴을 그리는 캔버스를 사용합니다. 2. 다음에 적합한 일련의 그래픽 요소를 제공하는 SVG 벡터 그래픽을 사용합니다. 정적 이미지 표시, 높은 보증 문서 보기 및 인쇄를 위한 애플리케이션 시나리오.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

html5에는 캔버스와 SVG라는 두 가지 그리기 방법이 있습니다.

Canvas와 SVG는 둘 다 권장되는 주요2D 그래픽 그리기 기술입니다. HTML5

Canvas란 무엇입니까

• 는 커튼과 같은 H5의 새로운 구성 요소입니다. code>HTML 스크립트(일반적으로Javascript)를 사용하여 그래픽을 그릴 수 있는 요소입니다. 다양한 다이어그램, 테이블 또는 일부 애니메이션을 만드는 데 사용할 수 있습니다.是H5新增的组件，就像一块幕布，可以使用脚本（通常为Javascript）在其中绘制图形的HTML元素，他可以用来制作各种图、表，或者一些动画。
• Canvas 技术比较新，注重栅格图像处理。

什么是SVG？

• SVG是一套独立的矢量图形语言，成为W3C标准已经有十几年，
• 基于可扩展标记语言XML 出来的

区别：

• Canvas 基于像素，提供 2D 绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图案；

• SVG为矢量图，提供一系列图形元素（Rect，Path，Circle，Line...）

  캔버스 기술은 비교적 새로운 기술이며 래스터 이미지 처리에 중점을 둡니다.

• SVG란 무엇인가요?

• SVG는 10년 넘게 W3C 표준으로 사용된 독립 벡터 그래픽 언어입니다.
  확장 가능한 마크업 언어 XML 기반

차이점:

캔버스는 픽셀을 기반으로 하며 2D 그리기 기능을 제공합니다. HTML에 의존하는 HTML 요소의 일종으로 스크립트를 통해서만 패턴을 그릴 수 있습니다.

SVG는 벡터 이미지이며 일련의 그래픽 요소 (Rect, Path, Circle, Line...)를 제공합니다. ;독립적으로 사용하거나 HTML에 포함할 수 있는 완전한 애니메이션 및 시간 메커니즘도 있습니다.
캔버스는 픽셀 단위로 렌더링됩니다. 그래픽이 그려지면 더 이상 브라우저에서 주의를 기울이지 않습니다.
SVG는 DOM 조작을 통해 표시됩니다.
기능 비교:
캔버스는 더욱 독창적인 기능, 동적 렌더링 및 대용량 데이터 그리기를 제공합니다.

• 해상도에 따라 다름

이벤트 핸들러를 지원하지 않음Can vas는 픽셀입니다- by-pixel 렌더링의 경우 일단 그래픽이 그려지면 브라우저에서 더 이상 주의를 기울이지 않으므로 텍스트 렌더링 능력이 약합니다

• 결과 이미지를 .png 또는 .jpg 형식으로 저장할 수 있습니다

• Canvas는 자주 다시 그려지는 그래픽 집약적 게임에 가장 적합합니다.

• 작은 영역, 많은 수의 장면에 적합

SVG는 더 완벽한 기능을 갖추고 있어 정적 이미지 표시, 높은 보장된 문서 보기 및 인쇄 애플리케이션 시나리오;

• 해상도에 의존하지 않음

이벤트 핸들러 지원

SVG는 DOM 조작을 통해 표시되며, 렌더링 영역이 큰 애플리케이션(예: Google 지도)에 가장 적합합니다. 복잡도가 높아 렌더링 속도가 느려집니다. (DOM을 과도하게 사용하는 애플리케이션은 빠르지 않습니다.)SVG는 DOM 작업으로 인해 복잡한 게임 애플리케이션에서 렌더링 속도가 느려집니다. 넓은 지역과 작은 지역에 적합합니다. 장면 수. 모바일 플랫폼에서 렌더링하려면 SVG에 우선순위를 부여하는 것이 좋습니다. 관련 추천: "html 비디오 튜토리얼"

위 내용은 html5의 그리기 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!