Home > Article > Web Front-end > What are Canvas and SVG in html5? What's the difference between them? (example)

What are Canvas and SVG in html5? What's the difference between them? (example)

青灯夜游Original: 2018-09-11 14:46:121795browse

This chapter will introduce to you what are Canvas and SVG in html5? What's the difference between them? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is Canvas?

Canvas is a rectangular canvas with specified length and width. We will use the new HTML5 JavaScript to draw various graphics using the HTML5 JS API. However, canvas itself has no drawing capabilities (it's just a container for graphics) - you have to use a script to do the actual drawing.

Canvas example code: Create a canvas, and then draw a circle on the 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:

What are Canvas and SVG in html5? Whats the difference between them? (example)

2. What is SVG?

SVG Scalable Vector Graphics (Scalable Vector Graphics) is a graphics format based on Extensible Markup Language (XML) for describing two-dimensional vector graphics. SVG is a new two-dimensional vector graphics format developed by W3C and is also the network vector graphics standard in the specification. SVG strictly follows XML syntax and uses a descriptive language in text format to describe image content. Therefore, it is a vector graphics format that is independent of image resolution.

We can briefly summarize SVG:
SVG refers to Scalable Vector Graphics(Scalable Vector Graphics)
SVG is used to define vector-based graphics for the web
SVG is defined using XML format Graphics
SVG images can be enlarged or resized without losing graphic quality
SVG is a standard of the World Wide Web Consortium
SVG is integrated with W3C standards such as DOM and XSL

SVG example code:

<!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:

What are Canvas and SVG in html5? Whats the difference between them? (example)

##3. The difference between Canvas and SVG

SVG

SVG is a language that uses XML to describe 2D graphics.

SVG is based on XML, which means every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.
In SVG, each drawn graphic is considered an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic.

Features:

Does not depend on resolution
Support event handler
Best suited for applications with large rendering areas (such as Google Maps)
High complexity will slow down rendering (any application that overuses the DOM is not fast)
Not suitable for game applications

Canvas

Canvas draws 2D graphics through JavaScript.

Canvas is rendered pixel by pixel.
In canvas, once the graphic is drawn, it will no longer receive the browser's attention. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.

Features:

Depends on resolution
Event handler is not supported
Weak text rendering capabilities
Ability to save result images in .png or .jpg format
Best suited for graphics-intensive games where many objects will be redrawn frequently

The above is the detailed content of What are Canvas and SVG in html5? What's the difference between them? (example). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the preloading function of rel attribute in HTML5?Next article：How to use the preloading function of rel attribute in HTML5?

See more

What are Canvas and SVG in html5? What's the difference between them? (example)

Related articles