Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use html5's canvas". In daily operation, I believe many people have doubts about how to use html5's canvas. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use html5's canvas"! Next, please follow the editor to study!

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 ()

At this point, the study on "how to use html5's canvas" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.