Summary of the canvas method of html5.

Summary of the canvas method of html5.

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

 

How can I use js to obtain objects drawn using canvas in html5? Urgent

The drawn image is not a DOM object and cannot be obtained. Vector graph

Html5 canvas: How to draw an oblique elliptic

Canvas in HTML5 does not directly provide the method for drawing an ellipse. The following is a summary of several painting methods. Various methods have advantages and disadvantages, which are selected as needed. The parameters of each method are the same:
Context is the 2D drawing environment object of Canvas,
X is the abscissa of the elliptical center,
Y is the vertical coordinate of the center of the elliptic,
A is the length of the horizontal and semi-axes of the elliptic,
B is the length of the vertical and semi-axes of the elliptic.
Parameter Equation Method
This method uses the parameter equation of the elliptic to plot the elliptic
// ----------- Use the parameter equation to draw an elliptic ---------------------
// The x and y parameters of the function are the center of the elliptic; the and B parameters are the cross and semi axes of the elliptic,
// The length of the vertical and semi-axis, which cannot be 0 at the same time
// The disadvantage of this method is that when the linWidth is wider and the ellipse is relatively flat
// The end of the long axis inside the elliptical is sharp, insmooth, and inefficient.
Function ParamEllipse (context, x, y, a, B)
{
// Max is equal to 1 divided by the greater of the long axis values a and B
// I increases by 1/max each cycle, indicating an increase in the degree
// This will make the path (ARC) drawn by each loop close to 1 pixel
Var step = (a> B )? 1/a: 1/B;
Context. beginPath ();
Context. moveTo (x + a, y); // draw from the left endpoint of the ellipse
For (var I = 0; I <2 * Math. PI; I ++ = step)
{
// The parameter equation is x = a * cos (I), y = B * sin (I ),
// The parameter is I, indicating the degree (radian)
Context. lineTo (x + a * Math. cos (I), y + B * Math. sin (I ));
}
Context. closePath ();
Context. stroke ();
};
Copy code
Uniform Compression Method
This method uses the principle of uniform compress in mathematics to compress the circle evenly into an elliptic. Theoretically, a standard elliptic can be obtained.
// ------------ Draw an elliptic using the uniform compression method --------------------
// The method is to use the arc method to draw a circle and scale the circle.
// Horizontal or vertical scaling (even compression)
// The longer the side of the ellipse drawn by this method, the closer it is to the end of the long axis, and the longer the width of the end of the long axis is normal.
// The closer the edges are from the short axis, the thinner the oval is, and even interrupted. This is the result of scale.
// This disadvantage is sometimes an advantage, for example, when it represents the three-dimensional effect of the ring (planetary halo)
// This method is not applicable when the value of a or B is 0.
Function EvenCompEllipse (context, x, y, a, B)
{
Context. save ();
// Select the greater one in a and B as the radius parameter of the arc method.
Var r = (a> B )? A: B;
Var ratioX = a/r; // horizontal scaling ratio
Var ratioY = B/r; // zooming ratio of the vertical axis
Context. scale (ratioX, ratioY); // scale (even compression)
... The remaining full text>