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

This article mainly introduces the example analysis of the new features of HTML5 and the common properties of Canvas. The article is very detailed and has a certain reference value. Interested friends must read it!

Content type of 1.HTML5

Content type description

Inline adds other types of content to the document, such as audio, video, canvas, iframe, etc.

Elements used by streams in the body of documents and applications, such as form, H2, and small

Title paragraph headings, such as H2, h3, hgroup, etc.

Content that interacts with the user, such as audio and video controls, botton and textarea, etc.

Metadata usually appears in the head of a page, setting the performance and behavior of other parts of the page, such as script, style, title, and so on.

Phrase text and text tag elements, such as mark, kdb, sub, sup, etc.

Fragments use friends to define the elements of page fragments, such as article, aside, title, etc.

New fragment class elements in 2.HTML5

Element name description

Header marks the contents of the header area (for the entire page or an area of the page)

Footer marks the content of the foot area (for the entire page or an area of the page)

An area in a section Web page

Article independent article content

Aside related content or citation

Auxiliary content of nav navigation class

3. New querySelector method

2016129110156970.png (693 × 164)

Prompt

Selectors API is not just convenient, selectors API usually searches API faster than previous child nodes when traversing DOM. In order to achieve fast stylesheets, browsers have highly optimized selector matching.

4.Canvas API

Overview of 4.1Canvas

Canvas is essentially a bitmap canvas, and the graphics drawn on it are not scalable and cannot be zoomed in or out like SVG images. In addition, objects drawn with Canvas do not belong to the page DOM structure or any namespaces.

To program with canvas, you first need to get its context (context). Then the actions are executed in the context, and finally the actions are applied to the context.

The coordinates in canvas start at the upper-left corner, the x-axis extends horizontally (in pixels) to the right, and the y-axis extends down vertically. The point in the upper left corner whose coordinates are x\ ^ 0\ {y\ {y\} 0 is called the origin.

Like most HTML elements, canvas elements can add borders, set inner margins, outer margins, and so on, by applying CSS, and some CSS attributes can be inherited by elements within the canvas.

4.2 use HTML5 Canvas API

Fixes-- transform in the rendering system-- can be sequentially applied, combined, or modified at will when applied. The result of each drawing operation has to be corrected by the correction layer before it is displayed on canvas. Although this adds additional complexity, it adds more powerful capabilities to the rendering system and may support real-time image processing like current mainstream image editing tools, so the complexity of this part of API is necessary.

There is an important suggestion about reusable code: in general, drawing should start from the origin (zero point of the coordinate system), apply transformations (zoom, translation, rotation, etc.), and then constantly modify the code until the desired results are achieved.

Context path function

(1) moveTo (XMague y): do not draw, just move the current position to the new destination coordinates (XPerry y)

(2) lineTo (XMague y): not only moves the current position to the new target coordinates (xQuery y), but also draws a straight line between the two coordinates.

(3) closePath (): this function behaves much like lineTo, except that closePaht automatically takes the starting coordinates of the path as the target coordinates. ClosePath also informs canvas that the current drawing is closed or forms a completely enclosed area, which is useful for future fills and strokes.

(4) strokeRect (): draw the outline of the rectangle based on the given position and coordinates.

(5) clearRect (): clear all the contents in the rectangular area and restore it to its original state, that is, transparent color.

(6) quadraticCurveTo (): the starting point of the curve drawn by the function is the current coordinate, with two sets of (XMagin y) edges. The second group refers to the end of the curve. The first group represents the control point (control point). The so-called control point is located next to the curve (not above the curve), which is equivalent to creating a pulling force on the curve. By adjusting the position of the control points, you can change the curvature of the curve.

Images add complexity to the canvas operation: you have to wait until the image is fully loaded before you can manipulate it. Browsers usually load pictures asynchronously while the page script is executed. If the view renders the picture to canvas before it is fully loaded, canvas will not display any pictures.

A gradient refers to using a step-by-step sampling algorithm on a color set and applying the results to stroke and fill patterns.

Using gradients requires three steps:

(1) create a gradient object

(2) set the color for the gradient object and indicate the transition mode

(3) set gradients for fill or stroke styles on 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 in an offset position. The offset is a value between 0.0 and 1.0 that represents how far the gradient is along the gradient line.

In addition to linear gradients, HTML5 Canvas API also supports radioactive gradients, which are conical areas where the color changes smoothly between two specified circles. Radioactive gradients and linear gradients use the same color termination points.

XML/HTML Code copies content to the clipboard

CreateRadialGradient (x0rect y0rer 0rec x1rect y1rer 1)

In the code, the first three parameters represent a circle with (x0) as the center and R0 as the radius, and the last three parameters represent another circle with (x1) 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. When each parameter displays the image on the canvas, the amount by which the image should be magnified (or reduced) to the bottom of the bed on the axis in this direction.

To perform the transformation of the graph and path at the origin, and then translate uniformly after execution. The reason is that transformation operations such as scale and rotate are aimed at the origin.

If you rotate a shape that is not at the origin, the rotate transform function rotates the shape around the origin instead of in place.

Note that the clipped Shadow tree is displayed first so that the real tree is displayed above the shadow in Z-axis order (the order in which objects overlap in canvas). In addition, the filling of the tree shadow uses the RGBA feature of CSS, through which we set the transparency value to 20% of the normal value.

Canvas text is manipulated in the same way as other path objects: you can outline the text and fill the inside 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 Code copies content to the clipboard

FillText (text,x,y,maxwidth)

(2)

XML/HTML Code copies content to the clipboard

StrokeText (text,x,y,maxwidth)

The parameters of the two functions are exactly the same, and the required parameters include text parameters and coordinate parameters used to specify the text location. Maxwidth is an optional parameter that limits font size and forces text fonts to shrink to the specified size. In addition, a measureText function is 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

2016129110228811.png (624 × 163)

Shadow attribut

2016129110245123.png (607 × 157)

One of the most useful features of Canvas API is that it allows developers to directly access the underlying pixel data of canvas.

(1)

XML/HTML Code copies content to the clipboard

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

This function returns the current canvas state 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: an 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. As a result, each pixel on canvas becomes four integer values in this array. The array is populated from left to right and from top to bottom.

The getImageData function takes four parameters, and the function returns only the data within the area defined by the four parameters. Only the pixels on the canvas in the rectangular area framed by the x, y, width, height parameters will be fetched.

On a canvas given width and height, the pixels on the coordinates (XMagne y) are made up as follows.

The red part:

XML/HTML Code copies content to the clipboard

((width*y) + x) * 4

Green part:

XML/HTML Code copies content to the clipboard

((width*y) + x) * 431

The blue part:

XML/HTML Code copies content to the clipboard

((width*y) + x) * 4x2

Transparency part:

XML/HTML Code copies content to the clipboard

((width*y) + x) * 4x3

(2)

XML/HTML Code copies content to the clipboard

Context.putImageData (imagedata,dx,dy)

This function allows the developer to pass in a set of image data in the same format as the one originally obtained from canvas.

(3)

XML/HTML Code copies content to the clipboard

Context.createImageData (sw,sh)

This function creates a set of image data and binds it to a canvas object.

If the picture in the canvas comes concurrently from the domain of the page that contains it, the page script will not be able to get the data in it.

The above is all the content of the article "sample Analysis of HTML5 New Features and Canvas Common Properties". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.