This article mainly introduces the guide to using the canvas method of html5. It is very simple and clear. It is a very good article. I recommend it to you here.
Canvas method
save() saves the status of the current environment
restore() returns the path status and properties that have been saved before
createEvent()
getContext() returns an object indicating the necessary API for accessing the drawing function
toDataUPL() Returns the URL of the canvas image
Properties and methods of line styles
property:
lineCap sets or returns the end endpoint style of the line
lineJoin sets or returns the corner type created when two lines intersect.
lineWidth sets or returns the width of the current line.
miterLimit sets or returns the maximum miter length
Color, style and shadow properties and methods
property
fillStyle sets or returns the color, gradient or mode used to fill the painting
strokeStyle set or return the color, gradient or mode used for strokes
shadowColor set or return the color used for the shadow
shadowBlur sets or returns the blur level used for shadows
shadowOffsetX sets or returns the horizontal distance of the shadow to the shape
shadowOffsetY sets or returns the vertical distance of the shadow to the shape
method
createLinearGradient() creates linear gradient (used on canvas content)
createPattern() repeats the specified element in the specified direction
createRadialGradient() creates radial/ring gradients (used on canvas content)
addColorStop() specifies the color or stop position in the gradient object
Path method
fill() fills the current drawing (path)
stroke() draws the defined path
beginPath() starts a path, or resets the current path
moveTo() moves the path to the specified point in the canvas without creating lines
closePath() creates a path from the current point to the starting point
lineTo() adds a new point to create a line from that point to the last specified point
clip() cuts an area of any shape and size from the original canvas
quadraticCurveTo() creates the second Bezier curve
bezierCureTo() creates the last Bezier curve
arc() creates arc/curve (used to create circles or partial circles)
arcTo() creates an arc/curve between two tangents
isPointInPath() Returns a Boolean value if the specified point is in the current path
rectangle
Rect() creates a rectangle
fillRect() draws the filled rectangle
strokeRect() draws rectangle (no fill)
clearRect() clears specified pixels within the given rectangle
Set text properties and methods
property:
font Sets or returns the current font properties of the text content
textAlign Set or return the current alignment of text content
The textBaseline setting returns the current text baseline used when drawing text.
method:
fillText() draws filled text on canvas
strokeText() draws text on canvas (no fill)
measureText() returns an object containing the specified text width
Conversion method
scale() scales the current plot to larger or smaller
rotate() rotates the current drawing
translate() remap the (0,0) position of the floral shirt
transform() replaces the current transformation matrix of the drawing
setTransform() resets the current conversion to the unit matrix. Then run transform()