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

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

First, what is canvas?

Canvas is a rectangular canvas with a specified length and width, 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

<! DOCTYPE html><html><head><meta charset= "UTF-8" ><title>canvas canvas </title><style Type= "Text/css" >.demo{width:500px;height:150px;margin:auto;} </style></head><body><div class= "Demo" ><!--add canvas notes, create canvas--><canvas id= " MyCanvas "width=" "height=" style= "border:1px solid #d3d3d3;" >    your browser does not support HTML5 canvas tags. </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>


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><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= "cy=" "r=" stroke= "#ff0" stroke-width= "3" fill= "Red"/> </svg></div></    Body></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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: