How to use the canvas method of html5
In this article, the editor introduces in detail "how to use html5's canvas method". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use html5's canvas method" can help you solve your doubts.
Canvas's method
Save () saves the state of the current environment
Restore () returns the previously saved path state and properties
CreateEvent ()
GetContext () returns an object indicating the API necessary to access the drawing function
ToDataUPL () returns the URL of the canvas image
Properties and methods of Line Styl
Attributes:
LineCap sets or returns the end end style of the line
LineJoin sets or returns the type of corner 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
Attribute
FillStyle sets or returns the color, gradient, or mode used to fill the painting
StrokeStyle sets or returns the color, gradient, or mode used for strokes
ShadowColor sets or returns the color used for shadows
ShadowBlur sets or returns the level of blur used for shadows
ShadowOffsetX sets or returns the horizontal distance of the shadow from the shape
ShadowOffsetY sets or returns the vertical distance of the shadow from the shape
Method
CreateLinearGradient () creates a linear gradient (for canvas content)
CreatePattern () repeats the specified element in the specified direction
CreateRadialGradient () creates a radial / circular gradient (for 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 a specified point in the canvas without creating a line
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 a second Bezier curve
BezierCureTo () creates the last power Bezier curve
Arc () creates an arc / curve (used to create a circle or partial circle)
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 a "filled" rectangle
StrokeRect () draws a rectangle (no fill)
ClearRect () clears the specified pixel within a given rectangle
Set text properties and methods
Attributes:
Font sets or returns the current font properties of text content
TextAlign sets or returns the current alignment of text content
The textBaseline setting returns the current text baseline used when drawing text.
Methods:
FillText () draws "filled" text on the canvas
StrokeText () draws text on the canvas (no padding)
MeasureText () returns the object containing the specified text width
Conversion method
Scale () zooms the current drawing to a larger or smaller size
Rotate () rotates the current drawing
Translate () remaps the position of the sweater (0mem0)
Transform () replaces the current transformation matrix of the drawing
SetTransform () resets the current transformation to the unit matrix. Then run transform ()
After reading this, the article "how to use the canvas method of html5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the article, please follow the industry information channel.
