HTML 5 캔버스와 SVG

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

SVG (추천 학습: html tutorial)

SVG는 XML을 사용하여 2D 그래픽을 설명하는 언어입니다.

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

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

Canvas

Canvas는 JavaScript를 사용하여 2D 그래픽을 그립니다.

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

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

캔버스와 SVG의 비교

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

Canvas

해상도에 따라 다름

이벤트 핸들러 지원 없음

약한 텍스트 렌더링 기능

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

많은 개체가 사용되는 이미지 집약적 게임에 가장 적합 자주 다시 그려야 함

SVG

해상도에 의존하지 않음

이벤트 핸들러 지원

Google 지도와 같이 렌더링 영역이 큰 애플리케이션에 가장 적합

복잡성이 높으면 렌더링 속도가 느려짐(DOM을 사용하는 모든 애플리케이션) 지나치게 빠르지 않음)

게임 애플리케이션에는 적합하지 않습니다

위 내용은 HTML 5 캔버스와 SVG의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!