What are the canvases and SVG in HTML5? What is the difference between them? Instance

This chapter introduces you to what are the canvas and SVG in HTML5? heart svg What is the difference between them? Have a certain reference value, the need for friends can refer to, I hope to help you.

png to svg

First, what is canvas?

Canvas is a rectangular canvas with a specified length and width, svg converter we will use the new HTML5 JavaScript, and use the HTML5 JS API to draw a variety of shapes. However, the canvas itself does not have the ability to draw (it is just a container for graphics)-You must use a script to accomplish the actual drawing task.

Canvas Instance code: Create a canvas and then draw a circle on the canvas free svg

<! DOCTYPE html>


	



	：


	



	



	



	



	



	Second, what is SVG?


	



	



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


	



	



	We can briefly summarize the SVG:

SVG refers to a scalable vector graphic (Scalable vector graphics)

SVG is used to define vector-based graphics for the network

SVG defines graphics using XML format

SVG images have no loss of graphics quality when zoomed in or changed size

SVG is the standard of the World Wide Web Consortium

SVG is a whole with a broad standard such as DOM and XSL


	



	



	SVG Instance code:


	


<! DOCTYPE html>


	



	：


	



	



	



	



	



	Third, 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 that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

In SVG, each drawn shape is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic.


	



	



	Characteristics:

Not dependent on resolution

Support for event handlers

Best for applications with large rendering areas (e.g. Google Maps)

High complexity slows rendering speed (any applications that overuse the DOM are unpleasant)

Not suitable for gaming applications


	



	



	Canvas


	



	



	Canvas uses JavaScript to draw 2D graphics.

The Canvas is rendered per pixel.

In the canvas, once the drawing is drawn, it will not continue to get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been overwritten by the graphic.


	



	



	Characteristics:

Dependent resolution

Event handlers are not supported

Weak text rendering capabilities

Ability to save result images in. png or. jpg format

Best for image-intensive games where many of the objects are redrawn frequently