Sort out some new features of HTML5 and common properties of canvas

Time:2021-10-27

1. Content type of HTML5

Content type describe
Embedded Add other types of content to the document, such as audio, video, canvas, iframe, and so on
flow Elements used in documents and application bodies, such as form, H1, and small
title Paragraph headings, such as H1, H2, hgroup, etc
interactive Content that interacts with users, such as audio and video controls, botton and textarea, etc
metadata It usually appears in the head of the page to set 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, sup, and so on
fragment UFIDA defines elements of page fragments, such as article, aside and title

2. New fragment class elements in HTML5

Yuansu name describe
header Mark the content of the header area (for the entire page or an area in the page)
footer Mark the content of the foot area (for the entire page or an area in the page)
section An area in a web page
article Independent article content
aside Relevant contents or citations
nav Navigation auxiliary content

3. New queryselector method
2016129110156970.png (693×164)

Tips
The selectors API is more than just a convenience. When traversing the DOM, the selectors API is usually faster than the previous child node search API. For quick style sheets, the browser highly optimizes selector matching.

4.Canvas API
4.1canvas overview
Canvas is essentially a bitmap canvas. The graphics drawn on it are not scalable and can not be enlarged or reduced like SVG images. In addition, the objects drawn with canvas do not belong to the page DOM structure or any namespace.
To program with canvas, you must first obtain its context. The actions are then executed in the context and finally applied to the context.
The coordinates in the canvas start from the upper left corner, the X axis extends to the right along the horizontal direction (by pixels), and the Y axis extends downward along the vertical direction. The point whose upper left coordinate is x = 0 and y-0 is called the origin.
Like most HTML elements, canvas elements can also add borders and set inner and outer margins by applying CSS, and some CSS attributes can also be inherited by elements in canvas.
4.2 using HTML5 canvas API
Correction – in the drawing system, it is called transformation – can be applied sequentially, combined or modified at will. Before the results of each drawing operation are displayed on the canvas, they must be corrected through the correction layer. Although this adds additional complexity, it adds more powerful functions to the rendering system. It may support real-time image processing like the current mainstream image editing tools, so the complexity of this part of the API is necessary.
There is an important suggestion about reusable code: generally, drawing should start from the origin (point 0,0 of the coordinate system), apply transformation (scaling, translation, rotation, etc.), and then constantly modify the code until the desired effect is achieved.
Context path function
(1) Moveto (x, y): move the current position to a new destination coordinate (x, y) instead of drawing;
(2) Lineto (x, y): not only moves the current position to the new target coordinates (x, y), but also draws a straight line between the two coordinates.
(3) Closepath(): the behavior of this function is very similar to that of lineto. The only difference is that closepaht will automatically take the starting coordinate of the path as the target coordinate. Closepath also informs canvas that the currently drawn figure has closed or formed a completely closed area, which is very useful for filling and stroking in the future.
(4) Strokerect(): draw the outline of the rectangle based on the given position and coordinates.
(5) Clearrect(): clear all contents in the rectangular area and restore it to its original state, that is, transparent color.
(6) Quadraticcurveto(): the function draws the curve from the current coordinates with two sets of (x, y) edges. The second group refers to the end of the curve. The first group represents control points. The so-called control point is located next to the curve (not above the curve), which is equivalent to generating a tension on the curve. By adjusting the position of the control points, you can change the curvature of the curve.
Pictures increase the complexity of canvas operation: you can’t operate on pictures until they are fully loaded. Browsers usually load pictures asynchronously while the page script is executing. If the view renders the picture to the canvas before it is fully loaded, the canvas will not display any pictures.
Gradient refers to using a step-by-step sampling algorithm on a color set and applying the results to stroke and fill styles.
Using gradients requires three steps:
(1) Create gradient objects;
(2) Set the color for the gradient object to indicate the transition mode;
(3) Set the gradient for the fill style or stroke style on the context.
To set which 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 the developer wants to use when stroking or filling at the offset position. The offset is a value between 0.0 and 1.0 that represents how far along the gradient line the gradient is.
In addition to linear gradients, the HTML5 canvas API also supports radioactive gradients, which means that the color will change smoothly in a conical area between two specified circles. Radioactive gradients and linear gradients use the same color end points.

XML/HTML CodeCopy contents to clipboard
  1. createRadialGradient(x0,y0,r0,x1,y1,r1)  

In the code, the first three parameters represent a circle with (x0, Y0) as the center and R0 as the radius, and the last three parameters represent another circle with (x1, Y1) as the center and R1 as the radius. The gradient appears in the area between the two circles.
The scala function takes two parameters to represent the values in the X and Y dimensions respectively. For each parameter, when displaying an image in canvas, the amount of image to be enlarged (or reduced) on the axis in this direction to the bottom of the bed.
To perform the transformation of graphics and paths at the origin, perform unified translation after execution. The reason is that transformation operations such as scale and rotate are performed at the origin.
If you rotate a figure that is not at the origin, the rotate transformation function rotates the figure around the origin rather than in place.
Note that the clipped “shadow” tree will be displayed first, so that the real tree will be displayed above the shadow in z-axis order (the overlapping order of objects in canvas). In addition, the RGBA feature of CSS is used to fill the tree shadow. Through the feature, we set the transparency value to 20% under normal conditions.
The method of manipulating canvas text is the same as that of other path objects: you can draw the outline of the text and fill the interior of the text; Colleagues, all transformations and styles that can be applied to other graphics can be used for text.
The text drawing function of the context object consists of two functions:
(1)

XML/HTML CodeCopy contents to clipboard
  1. fillText(text,x,y,maxwidth)  

(2)

XML/HTML CodeCopy contents to clipboard
  1. strokeText(text,x,y,maxwidth)  

The parameters of the two functions are exactly the same. The required parameters include text parameters and coordinate parameters used to specify the text position. Maxwidth is an optional parameter used to limit the font size, which forces the text font to shrink to the specified size. In addition, there is a measuretext function available, which will return a measurement object containing the actual display width of the specified text in the current context environment.
Context attribute related to text rendering
2016129110228811.png (624×163)

Shadow attribute
2016129110245123.png (607×157)

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

XML/HTML CodeCopy contents to clipboard
  1. context.getImageData(sx,sy,sw,sh)   

This function returns the current canvas status and displays it as a numeric value. Specifically, the returned object includes three properties.
Width: how many pixels are there in each row.
Height: how many pixels are there in each column.
Data: a one-dimensional array containing the RGBA value of each pixel obtained from CANVANS. The array holds four values for each pixel — red, green, blue, and alpha transparency. Each value is between 0 and 255. Therefore, each pixel on the canvas becomes four integer values in this array. The array is filled from left to right and from top to bottom.
The getimagedata function has four parameters, and the function only returns the data in the area defined by these four parameters. Only the pixels on the canvas in the rectangular area framed by the four parameters x, y, width and height will be taken.
On a canvas given width and height, the composition of pixels in coordinates (x, y) is as follows.
Red part:

XML/HTML CodeCopy contents to clipboard
  1. ((width*y)+x)*4  

Green part:

XML/HTML CodeCopy contents to clipboard
  1. ((width*y)+x)*4+1  

Blue part:

XML/HTML CodeCopy contents to clipboard
  1. ((width*y)+x)*4+2  

Transparency section:

XML/HTML CodeCopy contents to clipboard
  1. ((width*y)+x)*4+3  

(2)

XML/HTML CodeCopy contents to clipboard
  1. context.putImageData(imagedata,dx,dy)  

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

XML/HTML CodeCopy contents to clipboard
  1. context.createImageData(sw,sh)  

  This function can create a set of image data and bind it to the canvas object.
If the picture in canvas comes from the domain of the page containing it, the page script will not be able to obtain the data.