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

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.

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.