What are the drawing methods in html5

Drawing method in html5: 1. Use canvas, which is based on pixels, provides 2D drawing functions, relies on HTML, and draws patterns through scripts; 2. Use SVG vector graphics, which provides a series of graphic elements, Suitable for static image display, high-guarantee document viewing and printing application scenarios.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

There are two drawing methods in html5: Canvas and SVG.

Canvas and SVG are both recommended and main 2D graphics drawing technologies in HTML5

What is Canvas

• < ;canvas> is a new component of H5. It is like a curtain. You can use scripts (usually Javascript) to draw graphics in it. HTML elements, he can be used to Make various diagrams, tables, or some animations.
• Canvas technology is relatively new and focuses on raster image processing.

What is SVG?

• SVG is an independent vector graphics language that has been a W3C standard for more than ten years.
• Based on the Extensible Markup Language XML

Difference:

• ##Canvas is based on pixels and provides 2D drawing functions. It is an HTML element type that relies on HTML and can only draw patterns through scripts;

• SVG is a vector image, providing a series of graphic elements

  (Rect, Path, Circle, Line...); there are also complete animations and time mechanisms, which can be used independently or can Embed into HTML.

• Canvas is rendered pixel by pixel. Once the graphics is completed, it will no longer be paid attention to by the browser.

• SVG is displayed through DOM operations.

Function comparison:

Canvas provides more original functions, dynamic rendering and large data volume drawing

• Depends on resolution

• Does not support event handlers

##Canvas is rendered pixel by pixel. Once the graphics After the drawing is completed, it will no longer be paid attention to by the browser, so the text rendering ability is weak
The result image can be saved in .png or .jpg format
Canvas is best suited for graphics-intensive games with many objects that need to be frequently redrawn
Suitable for small area, large number of scenes

SVG has more complete functions and is suitable for static image display, high-guarantee document viewing and printing application scenarios;

does not depend on resolution
Support event handlers
SVG is displayed through DOM manipulation, most suitable for applications with large rendering areas (such as Google Maps)
High complexity will slow down the rendering speed (any application that excessively uses DOM is not fast)
SVG has high complexity due to DOM operations. High rendering speed will be slowed down in game applications, so it is not suitable for game applications
Suitable for scenes with large areas and small quantities. It is strongly recommended to give priority to SVG for rendering on mobile platforms.
Related recommendations: "

html video tutorial

"

The above is the detailed content of What are the drawing methods in html5. For more information, please follow other related articles on the PHP Chinese website!