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

This article focuses on "what is the principle of Canvas 2D". 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 principle of Canvas 2D"?

There are some common drawing methods before Web, such as Adobe Flash, SVG, and VML, but the new Canvas added to the HTML5 element is actually a bitmap bitmap canvas. Unlike SVG, elements painted on Canvas cannot be scaled and are not part of DOM.

Canvas can become the Web drawing standard for two reasons: first, it does not have to store every element drawn, so the performance is better; second, like the two-dimensional drawing API in other languages, Canvas is easier to implement.

In many cases, we do not pay much attention to the principle of the article, we hope that the reader can have a strong hands-on ability, but we also very much hope that the reader can understand the working principle of a thing. Therefore, this chapter specially lists a section to briefly explain how Canvas works.

As we all know, Canvas is mainly used for drawing, but Canvas does not pay much attention to animation. At present, all the Canvas animation in the world depends entirely on the level and skill of the developer. There is no concept of frame in Canvas, there is no concept of sprite, and many people who are used to animating with Flash are familiar with concepts that do not exist in Canvas. But the plug-in-free cross-platform running ability of Canvas is unmatched by Flash.

Canvas-based drawing does not directly perform various drawing operations on the drawing screen created by Canvas tags, but depends on the rendering context (rendering context) provided by the screen. All drawing commands and attributes are defined in the rendering context. When you use the getContext ("2d") method of Canvas, it returns a CanvasRenderingContext2D object with Cartesian plane coordinates internally, and the upper-left coordinates are (0,0). Note: when drawing with Canvas, all you need to do after getting the corresponding DOM object through the ID property of Canvas is to get the Context object.

The rendering context corresponds exactly to Canvas, and no matter how many times the getContext () method is called on the same Canvas object, the same rendering context object will be returned. Currently, all browsers that support Canvas support 2D rendering contexts.

Canvas drawing is a pixel-level bitmap drawing technology. The Canvas tag only defines a rectangular area in the web page.

Developers use JavaScript to complete a variety of graphics drawing operations.

Note that some claims on the Internet that Canvas is a vector drawing are wrong. No matter whether the Canvas is directly loaded into a picture or a line, the final result is a bitmap, not a vector map as mentioned in some articles. This is a common sense of principle. Please learn from yourself.

In all state modes, the drawing will have a drawing state, and the drawing state of Canvas is very rich. When introducing the drawing status of Canvas, if there are readers who don't know much about the word drawing status, they can understand it with the help of the Chinese interpretation of the word status. Here, let's show off our understanding of language: state, which is the state, is the description of space and self-expression, the description of state.

The definition of time is unknown and depends on demand.

Each rendering context is a collection (heap) of drawing states, which include deformation matrices (transform matrix), crop regions (clipping region), and many attributes. However, the current path and the current bitmap are not part of the drawing state, and the current path is persistent and can only be reset by beginPath () and closePath (). The current bitmap is an attribute of Canvas, not a rendering context.

In the process of learning Canvas drawing, there are often people who do not understand the role of restore and save of Canvas, and have doubts about the behavior of drawing and erasing.

The following figure gives an explanation of these doubts, as well as the sequence, up-and-down relationship and composition of the drawing.

It can be seen that the earliest command issued is at the bottom, the stack is irreversible, and the erase behavior is for all the painted content under a certain area.

Description of Canvas coordinate system

As mentioned earlier, the essence of Canvas is a Cartesian coordinate system, which is explained in more detail in this section. The upper-left corner of the rectangular area is the coordinate origin (0P0), the x-axis to the right, and the y-axis down.

The Canvas drawing coordinate system is shown in the following figure:

Canvas drawing coordinate diagram

From this picture, we can see that the coordinates and positioning methods commonly used in life have changed. In the concept of Canvas mapping, there are no negative coordinates, only positive coordinates. Also, the starting point of the coordinates starts in the upper-left corner with the (0d0) coordinate. Because the starting point is the upper left corner, any drawing is drawn down to the right. Beginners are easy to make mistakes in this coordinate system. I hope you will pay attention to this.

Canvas attribute description

Canvas has various properties, and the names and brief descriptions of these attributes are as follows:

FillStyle fill attribute, which mainly serves the fill method

StrokeStyle drawing attributes, mainly for rendering methods

Font font style definition

GlobalAlpha drawing transparency settin

The effect of the combination of graphics drawn before and after globalCompositeOperation

LineCap wire cap

The style at the connection of two segments of lineJoin, which has three choices, namely, round, bevel, and miter, and

LineCap is a combined attribute. The default is miter.

Width of lineWidth Lin

MiterLimit defines the maximum ratio of diagonal length to line width, which is available only when lineJoin='miter'

ShadowBlur Shadow blur

ShadowColor Shadow Color

ShadowOffsetX Shadow Transverse offset

ShadowOffsetY Shadow Longitudinal offset

TextAlign text horizontal alignment

Vertical alignment of textBaseline text

Note that all the above attribute names with the word global, such as globalAlpha, are global attributes. When using them, you must pay attention to save () and then restore (), that is, if you use the save () method, there must be a restore () method corresponding to it.

At this point, I believe you have a deeper understanding of "what is the principle of Canvas 2D". 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.