HTML5의 캔버스와 SVG는 무엇입니까? 그들 사이의 차이점은 무엇입니까? (예)-H5 튜토리얼-php.cn

HTML5의 캔버스와 SVG는 무엇입니까? 그들 사이의 차이점은 무엇입니까? (예)

青灯夜游

풀어 주다： 2018-09-11 14:46:12

원래의

1780명이 탐색했습니다.

이 장에서는 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:

#🎜🎜 #

HTML5의 캔버스와 SVG는 무엇입니까? 그들 사이의 차이점은 무엇입니까? (예)

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 그래픽을 설명하는 언어입니다. HTML5의 캔버스와 SVG는 무엇입니까? 그들 사이의 차이점은 무엇입니까? (예) SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.