Html5 canvas method User Guide, html5canvas

Html5 canvas method User Guide, html5canvas
This article mainly introduces the canvas method Usage Guide for html5, which is very simple and clear. It is a very good article. We recommend it to you here.

Canvas Method

Save () save the status of the current environment

Restore () returns the previously saved path status and attributes

CreateEvent ()

GetContext () returns an object indicating the APIS necessary to access the plotting function

ToDataUPL () returns the URL of the canvas Image

Attributes and methods of line styles

Attribute:

LineCap setting or return the end point style of a line

The corner type created when lineJoin is set or returns the intersection of two lines

LineWidth is used to set or return the width of the current line.

MiterLimit setting or return the maximum diagonal length

Color, style, and shadow attributes 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 settings or return the color used for shadow

ShadowBlur sets or returns the Blur level used for shadow.

ShadowOffsetX sets or returns the horizontal distance between the shadow and the shape.

ShadowOffsetY setting or return the vertical distance between the shadow and the shape.

Method

CreateLinearGradient () create a linear gradient (used on the canvas content)

CreatePattern () repeats the specified Element in the specified direction

CreateRadialGradient () creates a radial/Annular gradient (used on the canvas content)

AddColorStop () specifies the color or stop position in the gradient object.

Path Method

Fill () fill in the current drawing (PATH)

Stroke () draws a defined path

The START path of beginPath () or reset the current path.

MoveTo () moves the path to the specified vertex in the canvas without creating a line

ClosePath () is the path from the current point to the start point.

LineTo () adds a new vertex to create a line from this vertex to the last specified Vertex

Clip () cut any area of shape and size from the original canvas

QuadraticCurveTo () creates the second besell Curve

BezierCureTo () to create the upper-power beiser Curve

Arc () creates an arc/curve (used to create a circle or partial circle)

ArcTo () creates an ARC/curve between two tangent lines

IsPointInPath () if the specified vertex is located in the current path, a Boolean value is returned.

Rectangle

Rect () create a rectangle

FillRect () draws a "filled" rectangle

StrokeRect () Draw a rectangle (without filling)

ClearRect () clears the specified pixel in the given rectangle

Set text attributes and Methods

Attribute:

Font sets or returns the current font attribute of Text Content

TextAlign sets or returns the current alignment of Text Content

The textBaseline setting returns the current text baseline used for text painting.

Method:

FillText () draws "filled" text on the canvas

StrokeText () Draw text on the canvas (no filling)

MeasureText () returns the object containing the specified text width.

Conversion Method

Scale () scales the current drawing to a greater or smaller size

Rotate () rotate the current drawing

Translate () re-map the (0, 0) Position of the floral sweater

Transform () replaces the current conversion matrix of the Drawing

SetTransform () resets the current conversion to the matrix of units. Then runs transform ()