# CanvasContext

canvas Component's drawing context. CanvasContext Is the old interface, new edition Canvas 2D Interface and Web Consistent.

# attribute

# string|CanvasGradient fillStyle

Fill the color. Use the same CanvasContext.setFillStyle()。

# string|CanvasGradient strokeStyle

Border color. Use the same CanvasContext.setStrokeStyle()。

# number shadowOffsetX

Horizontal offset of shadow relative to shape

# number shadowOffsetY

The vertical deviation of the shadow from the shape

# number shadowColor

Color of Shadows

# number shadowBlur

Blur level of shadow

# number lineWidth

The width of the line. Use the same CanvasContext.setLineWidth()。

# string lineCap

The endpoint style of the line. Use the same CanvasContext.setLineCap()。

# string lineJoin

Intersection style of lines. Use the same CanvasContext.setLineJoin()。

lineJoin Legal value

value	Introductions	Minimum version
order	bevel
round	Fillet
miter	Cusp

# number MitterLimit

Max miter length. Use the same CanvasContext.setMiterLimit()。

# number lineDashOffset

Dashed offset, initial value 0

# string font

Properties of the current font style. accord with CSS font grammar of DOMString A string that requires, at a minimum, the font size and font family name. Default value is 10px sans-serif。

# number globalAlpha

Global brush transparency. range 0-1，0 For complete transparency, 1 Indicates complete opacity.

# string globalCompositeOperation

1.9.90

The type of composition operation applied when drawing a new shape. The current Android version is only available fill Fill block synthesis for stroke The synthetic effect of the segments is source-over。

Currently supported operations are

Android: xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light
iOS：xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity

# method

# CanvasContext.draw(boolean reserve, function callback)

Draws a description (path, deformation, style) previously in the drawing context to canvas In.

# CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)

Creates a linear gradient color. ReturnedCanvasGradientThe object needs to use the CanvasGradient.addColorStop() To specify gradient points, you need at least two.

# CanvasGradient CanvasContext.createCircularGradient(number x, number and number r)

Create a circular gradient color. The starting point is in the center of the circle and the ending point is the circle. ReturnedCanvasGradientThe object needs to use the CanvasGradient.addColorStop() To specify gradient points, you need at least two.

# CanvasContext.createPattern(string image, string repetition)

A method that creates a pattern for a specified image, repeating a meta image in a specified direction

# Object CanvasContext.measureText(string text)

Measure text size information. Currently only the text width is returned. Synchronization interface.

# CanvasContext.save()

Save the drawing context.

# CanvasContext.restore()

Restores a previously saved drawing context.

# CanvasContext.beginPath()

Start creating a path. Need to call fill or stroke Will use the path to fill or stroke

At the very beginning, it's a call to beginPath。
Multiple times in the same path. setFillStyle、setStrokeStyle、setLineWidthThe last setting shall prevail.

# CanvasContext.moveTo(number x, number and)

Moves the path to the specified point on the canvas without creating a line. use stroke Method to draw lines

# CanvasContext.lineTo(number x, number and)

Adds a new point, and then creates a line from the last specified point to the target point. use stroke Method to draw lines

# CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number and)

Creates a quadratic Bezier curve path. The starting point of a curve is the previous point in the path.

# [CanvasContext. bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number and)]((CanvasContext. bezierCurveTo))

Create a cubic bezier curve path. The starting point of a curve is the previous point in the path.

# CanvasContext.arc(number x, number and number r, number strap number eAngle, boolean counterclockwise)

Create an arc.

Create a circle that specifies the starting radian as 0, terminating radians 2 * Math.PI。
use stroke or fill Method to come in canvas Draw an arc in.

# CanvasContext.rect(number x, number and number width, number height)

Creates a rectangular path. Need fill or stroke Method draws the rectangle to the canvas in

# CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)

Draws arc paths based on control points and radius.

# CanvasContext.Clip()

Cut arbitrary shapes and sizes from the original canvas. Once a region is clipped, all subsequent drawings are restricted to the region being clipped (no access to other regions of the canvas). Can be used clip Method by using save Method to save the current canvas area and at any later time pass therestoreMethod to restore it.

# CanvasContext.fillRect(number x, number and number width, number height)

Fills a rectangle. use setFillStyle Set the fill color for the rectangle. If not set, the default is black.

# CanvasContext.strokeRect(number x, number and number width, number height)

Draw a rectangle(Unfilled)。 use setStrokeStyle Sets the color of the rectangular line. If not set, the default is black.

# CanvasContext.clearRect(number x, number and number width, number height)

Clears the contents of the canvas inside the rectangular area

# CanvasContext.fill()

Populates the contents of the current path. The default fill color is black.

# CanvasContext.stroke()

Draws a border for the current path. The default color is black.

# CanvasContext.closePath()

Close a path. Will connect the beginning and the end. If the path is closed and not called fill or stroke And opens a new path where the previous path will not be rendered.

# CanvasContext.scale(number scaleWidth, number scaleHeight)

After the call, the following paths are created with their ordinate and abscissa scaling. Multiple calls multiply.

# CanvasContext.rotate(number rotate)

Rotate the current axis clockwise from the origin. The rotation angles of multiple invocations stack up. The origin can be used translate Method modification.

# CanvasContext.translate(number x, number and)

For the origin of the current coordinate system (0, 0) Transform. The default coordinate origin is the upper-left corner of the page.

# CanvasContext.drawImage(string imageResource, number sx, number His number sWidth, number sHeight, number dx, number Two number dWidth, number dHeight)

Draw Image to Canvas

# CanvasContext.strokeText(string text, number x, number and number maxWidth)

Given (x, and) A Method of Text Stroke for Position Drawing

# 初始值(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

Method for Overlaying the Current Transformation Multiple Times Using Matrices

# CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

Method for resetting (overwriting) the current transformation using a matrix

# CanvasContext.setFillStyle(string|CanvasGradient color)

Set the fill color.

# CanvasContext.setStrokeStyle(string|CanvasGradient color)

Set stroke color.

# CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)

Set the shadow style.

# CanvasContext.setGlobalAlpha(number alpha)

Sets global brush transparency.

# CanvasContext.setLineWidth(number lineWidth)

Set the width of the line

# CanvasContext.setLineJoin(string lineJoin)

Set the intersection style of the line

# CanvasContext.setLineCap(string lineCap)

Set the endpoint style of a line

# CanvasContext.setLineDash(Array.&ltnumber&gt pattern, number offset)

Sets the dashed line style.

# CanvasContext.setMiterLimit(number MitterLimit)

Sets the maximum miter length. Miter length refers to the distance between the inner and outer corners where two lines meet. when CanvasContext.setLineJoin() for miter Only when it's effective. If the maximum inclined length is exceeded, the connection will be lineJoin for order To display.