HTML 5 캔버스와 SVG

캔버스와 SVG는 모두 브라우저에서 그래픽을 생성할 수 있지만 근본적으로 다릅니다.

SVG

SVG는 XML을 사용해 2D 그래픽을 기술하는 언어입니다.

SVG는 XML을 기반으로 합니다. 즉, SVG DOM의 모든 요소를 ​​사용할 수 있습니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.

SVG에서는 그려진 모든 모양이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.

캔버스

캔버스는 자바스크립트를 통해 2D 그래픽을 그립니다.

캔버스는 픽셀 단위로 렌더링됩니다.

캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 받지 못합니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.

캔버스와 SVG 비교

다음 표에는 캔버스와 SVG의 몇 가지 차이점이 나와 있습니다.

캔버스

해상도에 따라 다름

이벤트 핸들러를 지원하지 않음

약한 텍스트 렌더링 기능

.png 또는 . 결과 이미지를 jpg 형식으로 저장

은 많은 개체가 자주 다시 그려지는 그래픽 집약적 게임에 가장 적합합니다.

SVG

는 해상도에 의존하지 않습니다

이벤트 핸들러 지원

렌더링 영역이 큰 애플리케이션(예: Google 지도)에 가장 적합합니다.

복잡성이 높으면 렌더링 속도가 느려집니다(DOM을 과도하게 사용하는 애플리케이션은 빠르지 않습니다).

게임 응용에는 적합하지 않습니다

위 내용은 HTML 5 Canvas와 SVG의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!