H5 small content (3), h5 content

H5 small content (3), h5 content

Canvas)
Basic Content
In short, HTML5 provides a new element <canvas>
Canvas provides Canvas functions on the HTML page
Draw various images in the canvas
The image drawn by Canvas is irrelevant to the HTML page.
You cannot use DOM to retrieve the drawn image.
DOM events cannot be bound to the drawing.
Only APIs provided by Canvas can be used.
Canvas Purpose
Draw charts (such as bar charts and pie charts) on the HTML page)
Web Game-Flash technology
Use Canvas in HTML5
How to Use Canvas
Define <canvas> elements on the HTML page
In javascript code
Obtain the <canvas> element
Create a canvas object
GetContext ('2d ') Method
Use the APIS provided by Canvas
Drawing
Draw a rectangle
FillRect (x, y, width, height)-solid rectangle
Coordinate values in the upper left corner of the x and y-Rectangles
Width-set the width of the rectangle
Height-set the height of the comet
StrokeRect (x, y, width, height)-hollow rectangle
ClearRect (x, y, width, height)
Clears the rectangle of a specified area.
Set color
FillStyle-set fill color
StrokeStyle-set stroke color
GlobalAlpha-set transparency (0-1)
Set gradient
Linear Gradient-createLinearGradient (x1, y1, x2, y2)
With baseline-start point (x1, y1) and end point (x2, y2)
Sector (Ray) gradient-createRadialGradient (x1, y1, r1, x2, y2, r2)
With a cylindrical shape-area of two circles
Parameters
X1 and y1-coordinates of the center of the first circle
R1-radius of the first circle
Coordinates of the center of the second circle between x2 and y2
R2-radius of the second circle

Drawing
Draw text
Method
FillText (text, x, y)-solid text
Text-the text content drawn
Coordinate values drawn by x and y-
StrokeText (text, x, y)-hollow text
Attribute
Font-similar to the font attribute in CSS
TextAlign-set horizontal alignment of Text
Left-left alignment
Center-horizontal center
Right-right alignment
TextBaseline-set vertical alignment of Text
Top-top alignment
Middle-(vertical) center alignment
Bottom-bottom alignment
Hanging-suspension baseline
Alphabetic-letter baseline
Note:
Horizontal or vertical alignment, baseline alignment, not text alignment
Alignment in both the horizontal and vertical directions is not a necessary attribute (it is acceptable if not used)
Shadow Effect
ShadowColor-set the shadow color
ShadowOffsetX-set horizontal shadow
ShadowOffsetY-set vertical shadow
ShadowBlur-sets the Blur degree of the shadow.
Create path
(Identification) Method
BeginPath ()-indicates to start creating a path
ClosePath ()-indicates end of Creation Path
Setting Method
Rect (x, y, width, height)-set the rectangular shape
X and y-set coordinate values in the upper left corner of the rectangle
Width and height-set the width and height of the rectangle
Arc (x, y, radius, startAngle, endAngle, direction)-set the circular shape
X and y-set the coordinates of the circle center
Radius-set the circle radius
StartAngle and endAngle-set the starting position of the circle
Direction-draw clockwise or counterclockwise
Plotting Method
Stroke ()-draw a contour
Fill ()-draw fill
Draw lines (line and line, polygon)-create path
MoveTo (x, y)-set the start coordinate value of the line
LineTo (x, y)-sets the coordinate value of the end point (discount point) of the line.
Set line
LineWidth-set the line width
The default value is 1 (px)
LineCap-set the shape of the line endpoint
Butt-default value, straight
Round-rounded corner
Square
LineJoin-set the shape of two line focal points
Miter-default value, tip
Round-rounded corner
Bevel-diagonal Angle
MiterLimit-used with lineJoin
LineJoin is set to miter, and the attribute value is set to the extended range of the tip.
Canvas processing image
Draw Images
DrawImage (img, x, y)-load according to the original image size
Img-currently loaded (drawn) images
X and y-coordinate values of the image (upper left corner)
DrawImage (img, x, y, width, height)-load the image according to the specified size
Img-currently loaded (drawn) images
X and y-coordinate values of the image (upper left corner)
Width and height-set the width and height of the image.
Note:
Make sure that the image is uploaded after the onload event is completed.
Tiled Image
CreatePattern (img, type)
Img-tiled Image
Type-tiled
Repeat-tiled
No-repeat-not tiled
Repeat-x-horizontal tiled
Repeat-y-vertically tiled
Note:
Make sure that the image is uploaded after the onload event is completed.
Cut Image
Clip ()-cut (used according to the created path)
Canvas Method
Scale (x, y)-zoom (zoom in or out)
X-indicates horizontal scaling
Y-Indicates zooming in the vertical direction
Parameter Value
If it is 1, it indicates no Scaling (original size)
If the value is smaller than 1, it indicates downgrading.
If the value is greater than 1, it indicates amplification.
Translate (x, y)-reposition (x, y)
New coordinate values of x and y
Note that-x and y are relative to the coordinate value of the last position.
Rotate (rotation angle)-rotate the canvas
Formula: degrees Math. PI/180;
Chart. js-Canvas JS Library
Function-provides various charts
How to Use
Introduce the Chart. js file to the HTML page.
Define <canvas> elements on the HTML page
In javascript code
Obtain the <canvas> element
Create a canvas object
Var context = canvas. getContext ("2d ");
Create a Chart object through a canvas object
Var chart = new Chart (context );
Call API methods using Chart objects
Var data = [];
Chart. Pie (data );
Provides 6 types of charts
Bar (data, options)
Pie Chart-Pie (data, options)
Graph-Line (data, options)
Circular chart-Doughnut (data, options)
Radar chart-Radar (data, options)

Polar Region map-PolarArea (data, options)