HTML5의 캔버스와 SVG는 무엇입니까? 그들 사이의 차이점은 무엇입니까? (예)
- 青灯夜游원래의
- 2018-09-11 14:46:121845검색
이 장에서는 html5의 Canvas와 SVG가 무엇인지 소개하겠습니다. 그들 사이의 차이점은 무엇입니까? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. 캔버스란 무엇인가요?
Canvas는 길이와 너비가 지정된 직사각형 캔버스입니다. 새로운 HTML5 JavaScript를 사용하여 HTML5 JS API를 사용하여 다양한 그래픽을 그릴 것입니다. 그러나 캔버스 자체에는 그리기 기능이 없습니다(단지 그래픽을 위한 컨테이너일 뿐입니다). 실제 그리기를 수행하려면 스크립트를 사용해야 합니다.
Canvas 예시 코드: 캔버스를 만든 다음 캔버스에 원을 그립니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas画布</title>
<style type="text/css">
.demo{
width: 500px;
height: 150px;
margin: auto;
}
</style>
</head>
<body>
<div class="demo">
<!--添加canvas便签，创建画布-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</div>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</html>Rendering:
2. SVG란 무엇인가요?
SVG Scalable Vector Graphics(Scalable Vector Graphics)는 2차원 벡터 그래픽을 설명하기 위한 XML(Extensible Markup Language)을 기반으로 하는 그래픽 형식입니다. SVG는 W3C에서 개발한 새로운 2차원 벡터 그래픽 형식이며 사양의 네트워크 벡터 그래픽 표준이기도 합니다. SVG는 XML 구문을 엄격히 따르며 텍스트 형식의 설명 언어를 사용하여 이미지 내용을 설명합니다. 따라서 이미지 해상도와 무관한 벡터 그래픽 형식입니다. SVG를 간략하게 요약할 수 있습니다. SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 나타냅니다.
SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다.
SVG W3C 표준은 그래픽을 정의하기 위해 XML 형식을 사용합니다.
SVG 예제 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style type="text/css">
.demo{
width: 500px;
height: 150px;
margin: auto;
}
</style>
</head>
<body>
<div class="demo">
<svg width="100%" height="100%" >
<circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>
</div>
</body>
</html>Rendering: #🎜 🎜#
3. Canvas와 SVG의 차이점 🎜# SVG는 XML을 사용하여 2D 그래픽을 설명하는 언어입니다.  "153664802378255HTML5의 캔버스와 SVG는 무엇입니까? 그들 사이의 차이점은 무엇입니까? (예)")
기능: 해상도에 의존하지 않음 지원 이벤트 핸들러 렌더링 영역이 넓은 애플리케이션(예: Google Maps)에 가장 적합합니다.
복잡도가 높으면 렌더링 속도가 느려집니다. (DOM을 과도하게 사용하는 애플리케이션은 빠르지 않습니다.)게임 응용 프로그램에는 적합하지 않습니다
Canvas
Canvas는 JavaScript를 통해 2D 그래픽을 그립니다.
캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 받지 못합니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.
기능:
해상도에 따라 다름
이벤트 핸들러는 지원되지 않습니다
약한 텍스트 렌더링 기능
많은 개체가 자주 다시 그려지는 그래픽 집약적인 게임에 가장 적합합니다
위 내용은 HTML5의 캔버스와 SVG는 무엇입니까? 그들 사이의 차이점은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!