Sort out some new HTML5 features and common Canvas attributes-html5 tutorial skills-

This article mainly introduces some new HTML5 features and the sorting of common Canvas attributes. CanvasAPI is an important part of HTML5 for drawing graphics. For more information, see 1. HTML5 content type

Content type	Description
Embedded	Add other types of content to the document, such as audio, video, canvas, and iframe.
Stream	Elements used in documents and application bodies, such as form, h1, and small
Title	Paragraph titles, such as h1, h2, and hgroup
Interaction	Content that interacts with users, such as audio and video controls, botton, and textarea
Metadata	It usually appears in the head of the page and sets the performance and behavior of other parts of the page, such as script, style, and title.
Phrase	Text and text markup elements, such as mark, kdb, sub, and sup
Fragment	UFIDA defines elements of page fragments, such as article, aside, and title.

2. New fragment class elements in HTML5

Element name	Description
Header	Content that marks the header area (used for the entire page or a part of the page)
Footer	Content marked with the foot area (used for the whole page or a part of the page)
Section	Area on the Web page
Article	Independent article content
Aside	Related content or citation
Nav	Navigation content

3. New querySelector Method

Prompt
The selectors API is not only convenient. When traversing the DOM, the selectors API is usually faster than the previous sub-node search API. In order to implement a quick style sheet, the browser is highly optimized for selector matching.

4. Canvas API
4.1 Canvas Overview
Canvas is essentially a bitmap Canvas, and the drawing drawn on it cannot be scaled, and it cannot be zoomed in or out like an SVG image. In addition, the objects drawn using Canvas do not belong to the DOM structure of the page or any namespace.
To program with canvas, you must first obtain the context ). Then, execute actions in the context and apply these actions to the context.
The coordinates in the canvas start from the upper left corner. The X axis is horizontally oriented (by pixel) to the right, and the Y axis is vertically oriented down. The coordinate in the upper left corner is x = 0, and the point of the y-0 is called the origin.
Like most HTML elements, canvas elements can also add borders by applying CSS to set the padding and margin, and some CSS attributes can be inherited by elements in the canvas.
4.2 Use HTML5 Canvas API
Correction-the argument in the plotting system is transformation-the application can be sequentially applied, combined, or randomly modified. The results of each painting operation must be corrected by the correction layer before they are displayed on the canvas. Although this adds additional complexity, it adds more powerful features to the drawing system, and may support real-time image processing as the mainstream image editing tools currently do, therefore, the complexity of this part of the API is necessary.
There is an important suggestion for reusable code: Generally, plotting should start from the origin (0, 0 points in the coordinate system) and apply Transformation (scaling, translation, rotation, etc ), then, modify the code until the desired effect is reached.
Context path Function
(1) moveTo (x, y): Do not draw, just move the current position to the new target coordinate (x, y );
(2) lineTo (x, y): Not only moves the current position to the new target coordinate (x, y), but also draws a straight line between the two coordinates.
(3) closePath (): this function is very similar to lineTo. The only difference is that closePaht automatically takes the starting coordinate of the path as the target coordinate. ClosePath also notifies the canvas that the currently drawn image has been closed or has formed a completely closed area, which is useful for future filling and stroke.
(4) strokeRect (): draws the contour of a rectangle Based on the given position and coordinates.
(5) clearRect (): Clear all content in the rectangle area and restore it to its initial state, that is, transparent color.
(6) quadraticCurveTo (): the starting point of the curve drawn by the function is the current coordinate with two groups of (x, y) edges. The second group refers to the end point of the curve. The first group represents the control point ). The so-called control point is located next to the curve (not above the curve), and its function is equivalent to generating a tension on the curve. By adjusting the position of the control point, you can change the curvature of the curve.
Images increase the complexity of the canvas operation: You must wait until the image is fully loaded before you can perform operations on it. Browsers usually load images asynchronously while executing page scripts. If a view presents an image to a canvas before it is fully loaded, the canvas will not display any image.
Gradient refers to the use of a gradual Sampling Algorithm in the color set, and apply the results to the stroke style and fill style.
Three steps are required to use the gradient:
(1) create a gradient object;
(2) set the color of the gradient object and specify the transition mode;
(3) set a gradient for the fill style or stroke style in the context.
To set the color to display, use the addColorStop function on the gradient object. This function allows you to specify two parameters: Color and offset. The color parameter refers to the color that a developer wants to stroke or fill in at the offset position. The offset is a value between 0.0 and 1.0, representing how far is the gradient along the gradient line.
In addition to linear gradient, HTML5 Canvas API also supports radioactive gradient. The so-called radioactive gradient means that the color will be in the conical area between two specified circles. The color termination points used by the radioactive gradient and linear gradient are the same.

Copy XML/HTML Code to clipboard

1. CreateRadialGradient (x0, y0, r0, x1, y1, r1)

In the code, the first three parameters represent the circle with (x0, y0) as the center and r0 as the radius. The last three parameters represent the center with (x1, y1) as the center, r1 is another circle with a radius. The gradient appears in the middle of the two circles.
Scala functions have two parameters to represent the values in the x and y dimensions. When each parameter is used to display an image on the canvas, the image size at the bottom of the bed must be enlarged (or reduced.
You need to perform the graph and path transformation operation at the origin, and then unify the translation after the operation. The reason is that the scale and rotate operations are aimed at the origin point.
If you rotate an image that is not at the origin, the rotate function rotates the image around the origin instead of the original position.
Note: The cropped "shadow" tree is first displayed, so that the real tree is displayed on the shadow in the z-axis order (the overlapping order of objects in the canvas. In addition, the tree shadows are filled with the RGBA feature of CSS. Through the feature, we set the transparency value to 20% under normal circumstances.
The canvas text is operated in the same way as other path objects: it depicts the text outline and fills in the text; colleagues, all the transformations and styles that can be applied to other graphics, can be used for text.
The text rendering function of the context object consists of two functions:
(1)

Copy XML/HTML Code to clipboard

1. FillText (text, x, y, maxwidth)

(2)

Copy XML/HTML Code to clipboard

1. StrokeText (text, x, y, maxwidth)

The parameters of the two functions are identical. required parameters include the text parameters and the coordinate parameters used to specify the text position. Maxwidth is an optional parameter used to limit the font size. It forcibly contracts the text font to the specified size. In addition, there is also a measureText function available, which returns a measurement object that contains the actual display width of the specified text in the current context environment.
Context attributes related to text rendering

Shadow Property

One of the most useful features of the Canvas API is to allow developers to directly access the pixel data at the bottom layer of the canvas.
(1)

Copy XML/HTML Code to clipboard

1. Context. getImageData (sx, sy, sw, sh)

This function returns the current canvas status and displays it as a numerical value. Specifically, the returned object includes three attributes.
Width: the number of pixels in each row.
Height: the number of pixels in each column.
Data: A one-dimensional array containing the RGBA value of each pixel obtained from canvans. This array saves four values for each pixel-red, green, blue, and alpha transparency. Each value ranges from 0 to 255. Therefore, each pixel on the canvas is converted into four integers in this array. The filling order of the array is from left to right, from top to bottom.
The getImageData function has four parameters. This function returns only the data in the region specified by these four parameters. Only pixels on the canvas in the rectangle area specified by the x, y, width, and height parameters can be obtained.
On the canvas with the given width and height, the pixel composition on the coordinate (x, y) is as follows.
Red part:

Copy XML/HTML Code to clipboard

1. (Width * y) + x) * 4

Green:

Copy XML/HTML Code to clipboard

1. (Width * y) + x) * 4 + 1

Blue part:

Copy XML/HTML Code to clipboard

1. (Width * y) + x) * 4 + 2

Transparency:

Copy XML/HTML Code to clipboard

1. (Width * y) + x) * 4 + 3

(2)

Copy XML/HTML Code to clipboard

1. Context. putImageData (imagedata, dx, dy)

This function allows developers to input a set of image data in the same format as the one obtained from the canvas.
(3)

Copy XML/HTML Code to clipboard

1. Context. createImageData (sw, sh)

This function creates a set of image data and binds it to a canvas object.
If the image in the canvas comes from the domain of the page containing the image, the page script cannot obtain the data.