Organize some new features of HTML5 and common properties of Canvas

This article mainly introduces some new features of HTML5 and the sorting of common properties of Canvas. The Canvas API is an important content used in HTML5 to draw graphics. Friends who need it can refer to the following 1. HTML5 content types

hint

The selectors API is not just convenient. When it comes to traversing the DOM, the selectors API is usually faster than the previous child node search API. To implement a quick stylesheet, the browser highly optimizes selector matching.

Canvas is essentially a bitmap canvas, where the graphics drawn on it are not scalable and cannot be enlarged and reduced like an SVG image. In addition, objects drawn with Canvas do not belong to the page DOM structure or any namespace.

Programming with canvas, you must first get its context. Then execute actions in the context and finally apply these actions to the context.

The coordinates in canvas start from the upper left corner, the x-axis extends to the right in the horizontal direction (by pixels) and the y-axis extends down in the vertical direction. The point with the coordinates of the upper left corner x=0 and y-0 is called the origin.

Like most HTML elements, the canvas element can also add borders by applying CSS, set inner margins, outer margins, etc., and some CSS attributes can also be inherited by elements in canvas.

Correction - In the drawing system, the statement is transformation - can be applied sequentially, combined or modified at will when applied. The results of each drawing operation must be corrected through the correction layer before it is displayed on canvas. Although this adds additional complexity, it adds more powerful features to the drawing system, which may support real-time image processing like the current mainstream image editing tools, so the complexity of this part of the content in the API is necessary.

There is an important suggestion about reusable code: Generally, drawing should start from the origin (0,0 points in the coordinate system), apply transformation (scaling, translation, rotation, etc.), and then continuously modify the code until the desired effect is achieved.

context path function

(1) moveTo(x,y): does not draw, just move the current position to the new destination 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(): The behavior of this function is very similar to lineTo. The only difference is that closePaht will automatically use the starting coordinate of the path as the target coordinate. closePath also informs canvas that the currently drawn figure has been closed or has formed a completely closed area, which is very 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 content in the rectangle area and restore it to its initial state, that is, transparent color.

(6) quadraticCurveTo(): ​​The starting point of the function drawing a curve is the current coordinate, with two sets of (x,y) edges. The second group refers to the end point of the curve. The first group represents control points. The so-called control point is located next to the curve (not above the curve), and its effect is equivalent to creating a tension force on the curve. By adjusting the position of the control point, the curvature of the curve can be changed.

Images increase the complexity of canvas operations: you must wait until the image is fully loaded before it can be operated. Browsers usually load pictures asynchronously while the page script is executed. If the view renders the image onto the canvas before it is fully loaded, the canvas will not display any pictures.

Gradient refers to using stepwise sampling algorithms on color sets and applying the results to stroke styles and fill styles.

Using gradients requires three steps:

(1) Create a gradient object;

(2) Set color for gradient objects and indicate the transition method;

(3) Set gradients for fill styles or stroke styles on the context.

To set which color to display, use the addColorStop function on the gradient object. This function allows specifying two parameters: color and offset. Color parameters are the colors that developers want to use when they are stroked or filled at offset positions. The offset is a value between 0.0 and 1.0, representing how far the distance is to change along the gradient line.

In addition to linear gradients, the HTML5 Canvas API also supports radioactive gradients. The so-called radioactive gradient means that the color changes smoothly in the conical area between two specified circles. The color termination points used for radioactive gradients and linear gradients are the same.