Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the drawing method in html5". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the drawing method in html5"?

Html5 in the drawing method: 1, the use of canvas canvas, which is based on pixels, provides 2D drawing function, depends on HTML, through the script to draw patterns; 2, the use of SVG vector graphics, it provides a series of graphic elements, suitable for static picture display, high guarantee of document viewing and printing of the application scene.

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

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

Canvas and SVG are both recommended and major 2D graphics rendering techniques in HTML5.

What is Canvas?

H5 is a new component, like a curtain, you can use a script (usually Javascript) to draw graphics in the HTML element, it can be used to make a variety of graphs, tables, or some animation.

Canvas technology is relatively new and pays attention to raster image processing.

What is SVG?

SVG is an independent vector graphics language, which has been the W3C standard for more than ten years.

Based on extensible markup language XML

Difference:

Canvas, which is pixel-based and provides 2D rendering functions, is a HTML element type that depends on HTML and can only draw patterns through scripts.

SVG for vector graphics, provides a series of graphic elements (Rect,Path,Circle,Line...); there are complete animation, time mechanism, itself can be used independently, can also be embedded in HTML.

Canvas is rendered pixel by pixel, and once the graphics are drawn, they will no longer be watched by browsers.

SVG is displayed through the DOM operation.

Functional comparison:

Canvas provides more primitive functions, dynamic rendering and large data rendering.

Dependent resolution

Event handlers are not supported

Canvas is rendered pixel by pixel, and once the drawing is completed, it will no longer be noticed by the browser, so the text rendering ability is weak.

The resulting image can be saved in .png or .jpg format

Canvas is most suitable for graphics-intensive games with many objects to be redrawn frequently.

Suitable for small area, large number of scenes

SVG is more functional and suitable for static picture display, high-guarantee document viewing and printing application scenarios.

Independent of resolution

Support for event handlers

SVG is displayed through DOM operation and is most suitable for applications with large rendering areas (such as Google Maps)

High complexity slows down rendering (any application that uses DOM too much is not happy)

Due to DOM operation, SVG will slow down rendering speed in game applications with high complexity, so it is not suitable for game applications.

Suitable for large area, small number of scenes. It is strongly recommended that SVG be preferred for rendering on mobile platforms.

At this point, I believe you have a deeper understanding of "what is the drawing method in html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.