HTML
HTML
SVG | HTML Canvas |
---|---|
SVG는 확장성이 더 좋습니다. 따라서 어떤 해상도에서도 고품질로 인쇄할 수 있습니다. | 캔버스는 확장성이 떨어집니다. 따라서 더 적은 수의 물체나 더 큰 표면의 경우 더 높은 해상도( |
SVG)로 인쇄하는 데 적합하지 않습니다. | 캔버스는 더 작은 표면이나 더 많은 수의 물체에서 더 나은 성능을 제공합니다. |
SVG는 스크립트와 CSS를 통해 수정할 수 있습니다. | 캔버스는 스크립트를 통해서만 수정할 수 있습니다. |
SVG는 벡터 기반이며 모양으로 구성됩니다. | 캔버스는 래스터를 기반으로 하며 픽셀로 구성됩니다. |
다음 코드를 실행하여 확장 가능한 벡터 그래픽(SVG)을 웹 페이지에 추가할 수 있습니다. -
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>HTML5 SVG</title> </head> <body> <h2 align = "center">HTML5 SVG Circle</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" /> </svg> </body> </html>
다음 코드를 실행하여 직사각형을 그리는 방법을 알아볼 수 있습니다. HTML5 Canvas 사용:
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Tag</title> </head> <body> <canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; ctx.fillRect(0,0,300,100); </script> </body> </html>
위 내용은 SVG와 HTML5 Canvas의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!