HTML5_Canvas _ attributes, definitions, and methods (learning notes)

I. simple graphics. The complete set of attributes and methods are used to draw rectangles:
1. fillStyle can be set to CSS color, a pattern, or a color gradient. FillStyle is black by default. You can set it to any color you like. As long as the page is open, each drawing context records its own properties unless you reset it.
2. fillRect (x, y, width, height) draws a rectangle and fills it with the current fillStyle.
3. Like fillStyle, srtokeStyle can be set to CSS color, a pattern, or a color gradient.
4. strokeRect (x, y, width, height) uses the current storke style to draw a rectangle. strokeRect does not fill the middle area, but only draws the edge of the rectangle.
5. clearRect (x, y, width, height) clears the pixels in the specified rectangular area.
Ii. Path
According to the Convention, no matter what type of image is drawn, the first one to be called is beginPath. This simple function does not contain any parameters. It is used to notify canvas to start drawing a new graph. For canvas, the biggest use of the beginPath function is that canvas needs to calculate the internal and external ranges of the image to complete subsequent stroke and fill.
The path tracks the current coordinates. The default value is the origin. Canvas also tracks the current coordinates, but it may be modified by drawing code.
Each canvas has a path. Defining a path is like painting with a pencil. You can draw any image, but it is not necessarily a part of the final work until you pick up the paint brush and draw the path with ink.
MoveTo (x, y): Do not draw, just move the current position to the new target coordinate (x, y) and use it as the start point of the line.
LineTo (x, y): draws a line to the specified target coordinate (x, y), and draws a straight line between two coordinates. No matter which one of them is called, the graph is not actually drawn, because we do not have a master, and the stroke and fil functions are called. Currently, it is only used to define the path for later painting.
ClosePath (). This function is very similar to lineTo. The only difference is that closePath automatically takes the starting coordinate of the path as the target coordinate. ClosePath also notifies the canvas that the currently drawn image is closed or a completely closed area is formed. Start the connection start point and close the path.
Iii. Text
The canvas text is operated in the same way as other path objects: It can depict the text outline and fill the text, and all the transformations and styles that can be applied to other graphics can be used for the text. The text rendering function of the context object consists of two functions:
FillText (text, x, y, maxwidth)
TrokeText (text, x, y, maxwidth)
The two parameters are identical. 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. 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.
To ensure that the text can be normally displayed in various browsers, the following font attributes are available in the painting context:
1. font can be any value in CSS font rules. Including: font style, font variant, font size and width, line height and font name.
2. textAlign controls the text alignment. It is similar to text-align in CSS (but not exactly the same. Possible values: start, end, left, right, and center.
3. textBaseline controls the position of the text relative to the start point. The options include top, hanging, middle, alphabetic, ideographic, and bottom. You can safely use top, middle, or bottom as text baselines for simple English letters.
Iv. color gradient
Once we have the drawing context, we can start to define a color gradient. Gradient is the smoothing of two or more colors. Canvas's drawing context supports two types of gradient:
1. createLinearGradient (x0, y0, x1, x1) draws a gradient from (x0, y0) to (x1, y1) along a straight line.
2. createRadialGradient (x0, y0, r0, x1, y1, r1) draws a gradient along the cone between the two circles. The first three parameters represent the starting circle. the center of the circle is (x0, y0) and the radius is r0. The last three parameters represent the ending circle. the center of the circle is (x1, y1) and the radius is r1.
5. Images
The canvas context defines several ways to draw images:
1. drawIamge (image, dx, dy) accepts an image and draws it to canvaa. The coordinates (dx, dy) represent the upper left corner of the image. For example, coordinates (0, 0) are used to draw an image to the upper left corner of the canvas.
2. drawIamge (image, dx, dy, dw, dh) accepts an image, scales It To The width dw and height dh, and then draws it to the (dx, dy) on the canvas) location.
3. drawIamge (image, sx, sy, sw, sh, dx, dy, dw, dh) accepts an image through parameters (sx, sy, sw, sh) specify the crop range, scale the image to the (dw, dh) size, and draw it to the (dx, dy) Position on the canvas.
To draw an image on a canvas, you must first have an image. This image can be an existing element or created using JS. Either way, you need to fully load the image before drawing the canvas. Browsers usually load images asynchronously while executing page scripts. If you try to present an image to a canvas before it is fully loaded, the canvas will not display any image.
Vi. Gradient
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 gradient for the fill style or stroke style in 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 changing to other colors, you can also set the alpha value (for example, transparency) for the color, and the alpha value can also be changed. To achieve this, you need to use another representation of the color value, such as the built-in CSSrgba function of the alpha component.
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: the parameters are as follows:
CreateRadialGradient (x0, y0, r0, x1, y1, r1)
In the code, the first three parameters represent (x0, y0) as the center, r0 as the radius, and the last three parameters represent (x1, y1) as the center, r1 is another circle with a radius. The gradient appears in the middle of the two circles.
VII. Background Image
It is useful to draw images directly, but in some cases, using images as backgrounds like CSS is also very useful. HTML5Canvas API also supports image tiled. Call the createPattern function.
8. Draw a curve (quadratic curve)
The start point of the curve drawn by the quadraticCurveTo function is the current coordinate, with two sets of (x, y) parameters. The second set is 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.
Other curves of the HTML5 Canvas API also involve bezierCurveTo, arcTo, and arc functions. These functions make curves more plasticity through multiple control points (such as radius and angle.
9. Scale the canvas object
Scale (x, y). This function has two parameters to represent the values in the x and y dimensions. When a canvas displays an image, each parameter is transmitted to the image to be enlarged (or reduced) in the current direction. If the value of x is 2, it means that all the elements in the image will become twice the width. If the y value is 0.5, all the elements in the image will be half the height of the previous one.
Note: The image and path transformation operations must be performed at the origin point. After the operations are completed, the operations should be uniformly translated. The reason is that the scale and rotate operations are aimed at the origin point. If you rotate a person's image that is not at the origin, the rotate function rotates the image around the origin rather than in the original position. Similarly, if the scaling operation is not placed on the appropriate coordinates, all path coordinates will be scaled at the same time. Depending on the size of the scaling ratio, the new coordinates may all be out of the canvas range, which may cause confusion for developers. Why does my scaling operation Delete the image?
10. Transformation
The conversion operation is not limited to scaling and shifting. We can use the context function. rotate (angle) to rotate the image. You can even directly modify the underlying transformation matrix to complete some advanced operations, such as cropping the image's rendering path. For example, context. rotate (1.57). The rotation angle parameter is in radians.
BeginPath (): Start
MoveTo (x, y): Start Coordinate
LineTo (x, y): Target coordinate
ClosePath (): Connection start point, closed path
Translate (): Move
Rotate (): rotate
Restore (): restore
Scale (): scale
Save (): save
Rotate (angle): rotating an image
QuadraticCurveTo (): Draw a curve
Stroke (): Draw
StrokeText (): depicts text outlines
StrokeStyle (): color settings
StrokeRect (): uses the current storke style to draw a rectangle, but only draws the edge of the rectangle.
Fill: fill
FillRect (): draws a rectangle and fills it with the current fillStyle.
FillStyle (): style Filling
FillText: Fill in text content
DrawIamge (): Image Filling
CreatePattern (): Fill in the background image
AddColorStop (): gradient Filling
CreateRadialGradient (): Radioactive gradient
ClearRect (): clears pixels in the specified area of the rectangle.
. LineCap (butt | square | round): Specifies the style at the end of the line.
. FillStyle: Set to CSS color, a pattern, or a color gradient.
. LineWidth: Set the line width.
. LineJoin (round): modifies the connection mode of a line segment in the current shape to make the corner smoother.
. ShadowColor: The color value in any css. Transparency (alpha) can be used)
. ShadowOffsetX: pixel value. The value is positive and the shadow is moved to the right. The value is negative and the shadow is moved to the left.
. ShadowOffsetY: pixel value. The value is positive and the shadow is moved downward. The value is negative and the shadow is moved upward.
. ShadowBlur: Gaussian Blur value. The greater the value, the blurrier the shadow.