createCanvasContext

CanvasContext ft.createCanvasContext(string canvasId, Object this)

Create a canvas for the drawing context of the CanvasContext object

Parameters

string canvasId

The canvas component to get the context canvas-id property

Object this

Under a custom component, this of the current component instance means that the canvas with a canvas-id is looked for under this custom component, and if omitted, it is not found within any custom component.

Return Value

CanvasContext

canvasToTempFilePath

CanvasContext ft.canvasToTempFilePath(Object object, Object this) Exports the contents of the specified area of the current canvas to produce a picture of the specified size. Call this method in the draw() callback to ensure that the image is exported successfully.

Parameters

Object object

Properties	Type	The default value is	Required	Description	Minimum version
x	number	0	No	The upper-left abscissa of the specified canvas area is
y	number	0	No	The upper-left ordinate coordinate of the specified canvas area is
width	number	Canvas width -x	No	Specifies the width of the canvas area
height	number	Canvas height -y	No	Specifies the height of the canvas area
destWidth	number	width* Screen pixel density	No	The width of the output picture is
destHeight	number	height*Screen pixel density	No	The height of the output picture is
canvasId	string		No	The canvas id, which passes in the canvas-id	of the canvas component
canvas	Object		No	Canvas id, which passes in the canvas component instance (canvas type="2d" when using this property	).
fileType	string	png	No	The type of destination file
quality	number		No	The quality of the image, which is currently only valid for jpg. The value range is (0, 1], which is treated as 1.0 when not in range.
success	function		No	The interface calls the callback function successfully
fail	function		No	The callback function that failed the interface callback function
complete	functio		No	The callback function at the end of the interface call (the call succeeds or fails)

Legal value for object.fileType

The value	Description	Minimum version
jpg	JPG image
png	png image

object.success callback function

Parameters

Object res

Properties	Type	Description
tempFilePath	string	The temporary path (local path) of the makefile file

Object this

Under Custom Components, this of the current component instance to manipulate the canvas component within the component

Sample Code

canvasPutImageData

CanvasContext ft.canvasPutImageData(Object object, Object this) Draws pixel data to the canvas. Under Custom Components, the second parameter is passed in the custom component instance this to manipulate the canvas component within the component

Parameters

Object object

Properties	Type	The default value is	Required	Description
canvasId	string		Yes	The canvas id, which passes in the canvas-id property of the canvas component.
data	Uint8ClampedArray		Yes	Image pixel data, a one-dimensional array of rgba
x	number		Yes	The position offset of the source image data in the destination canvas (the offset in the x-axis direction)
y	number		Yes	The position offset of the source image data in the destination canvas (the offset in the y-axis direction)
width	number		Yes	The width of the rectangular area of the source image data is
height	number		Yes	The height of the rectangular area of the source image data is
success	function		No	The interface calls the callback function successfully
fail	function		No	The callback function that failed the interface callback function
complete	function		No	The callback function at the end of the interface call (the call succeeds or fails)

Object this

Under Custom Components, this of the current component instance to manipulate the canvas component within the component

Sample Code

canvasGetImageData

CanvasContext ft.canvasGetImageData(Object object, Object this) Gets the pixel data implied by the canvas area.

Parameters

Object object

Properties	Type	The default value is	Required	Description
canvasId	string		Yes	The canvas id, which passes in the canvas-id property of the canvas component.
x	number		Yes	The upper-left abscissa of the rectangular area of the image data to be extracted
y	number		Yes	The upper-left ordinate
width	number		Yes	The width of the rectangular area of the image data to be extracted is
height	number		Yes	The height of the rectangular area of the image data to be extracted is
success	function		No	The interface calls the callback function successfully
fail	function		No	The callback function that failed the interface callback function
complete	function		No	The callback function at the end of the interface call (the call succeeds or fails)

object.success callback function

Parameters

Object res

Properties	Type	Description
width	number	The width of the image data rectangle
height	number	The height of the image data rectangle
data	Uint8ClampedArray	Image pixel data, a one-dimensional array of rgba

Object this

Under Custom Components, this of the current component instance to manipulate the canvas component within the component

Sample Code

CanvasContext

The drawing context of the canvas component. CanvasContext is an old version of the interface, and the new Canvas 2D interface is consistent with the web.

Properties

• string| CanvasGradient fillStyle
  Fill color. Usage is the same as CanvasContext.setFillStyle().
• string| CanvasGradient strokeStyle
  Border color. The usage is the same as CanvasContext.setStrokeStyle().
• number shadowOffsetX
  The horizontal offset of the shadow relative to the shape
• number shadowOffsetY
  The offset of the shadow relative to the shape in the vertical direction
• number shadowColor
  The color of the shadow
• number shadowBlur
  The blur level of the shadow
• number lineWidth
  The width of the line. The usage is the same as CanvasContext.setLineWidth().
• string lineCap
  The endpoint style of the line. The usage is the same as CanvasContext.setLineCap().
• string lineJoin
  The intersection style of the line. The usage is the same as CanvasContext.setLineJoin().

Legal value for lineJoin

The value	Description	Minimum version
bevel	Bevel
round	Rounded corners
miter	Sharp corners

• number miterLimit
  Maximum miter length. The usage is the same as CanvasContext.setMiterLimit().
• number lineDashOffset
  Dashed offset with an initial value of 0
• string font
  The properties of the current font style. DOMString strings that conform to CSS font syntax require at least a font size and font family name. The default value is 10px sans-serif.
• number globalAlpha
  Global brush transparency. The range 0-1, 0 for full transparency, 1 for full opacity.
• string globalCompositeOperation
  The type of compositing operation that is applied when a new shape is drawn. At present, the Android version is only suitable for compositing fill blocks, and the composition effect for stroke segments is source-over.

There are currently supported operations

Method

• CanvasContext.draw(boolean reserve, function callback)
  Draw the description (path, warp, style) previously in the drawing context into the canvas.
• CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)
  Creates a linear gradient color. The returned CanvasGradient object requires the use of CanvasGradient.addColorStop() to specify the gradient points, at least two.
• CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)
  Creates a gradient color for a circle. The starting point is in the center of the circle and the ending point is in the ring. The returned CanvasGradient object requires the use of CanvasGradient.addColorStop() to specify the gradient points, at least two.
• CanvasContext.createPattern(string image, string repetition)
  A method that creates a pattern for a specified image that repeats the 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. A fill or stroke call is required to use the path for fill or stroke
• CanvasContext.moveTo(number x, number y)
  Moves the path to the specified point in the canvas without creating a line. Use the stroke method to draw lines
• CanvasContext.lineTo(number x, number y)
  Add a new point, and then create a line from the last specified point to the target point. Use the stroke method to draw lines
• CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
  Create a quadratic Bézier curve path. The curve starts at the previous point in the path.
• CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
  Create a cubic Bezier curve path. The curve starts at the previous point in the path.
• CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
  Create an arc.
• CanvasContext.rect(number x, number y, number width, number height)
  Create a rectangular path. You need to use the fill or stroke method to actually draw the rectangle into the canvas
• CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)
  Draws an arc path based on control points and radii.
• CanvasContext.clip()
  Cut any shape and size from the original canvas. Once an area is clipped, all subsequent drawings are restricted to the area being cut (other areas on the canvas cannot be accessed). You can save the current canvas area by using the save method before using the clip method, and restore it by restoring it at any later time.
• CanvasContext.fillRect(number x, number y, number width, number height)
  Fill a rectangle. Use setFillStyle to set the fill color of the rectangle, if not set to black by default.
• CanvasContext.strokeRect(number x, number y, number width, number height)
  Draw a rectangle (not padded). Use setStrokeStyle to set the color of the rectangular line, if not set the default is black.
• CanvasContext.clearRect(number x, number y, number width, number height)
  Clears the content on the canvas within that rectangular area
• CanvasContext.fill()
  Populates the contents of the current path. The default fill color is black.
• CanvasContext.stroke()
  Draws the border of the current path. The default color color is black.
• CanvasContext.closePath()
  Close a path. The start and end points are connected. If fill or stroke is not invoked after closing the path and a new path is opened, the previous path will not be rendered.
• CanvasContext.scale(number scaleWidth, number scaleHeight)
  After the call, the path created after its horizontal ordinate coordinates are scaled. Multiple calls are multiplied.
• CanvasContext.rotate(number rotate)
  Rotates the current axis clockwise, centered on the origin. The angles at which the rotation is invoked multiple times are superimposed. The origin can be modified using the translate method.
• CanvasContext.translate(number x, number y)
  Transforms the origin (0, 0) of the current coordinate system. The default coordinate system origin is the upper-left corner of the page.
• CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
  Draw an image to the canvas
• CanvasContext.strokeText(string text, number x, number y, number maxWidth)
  The method by which a text stroke is drawn at a given (x, y) position
• CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
  A method that uses a matrix to overlay the current transformation multiple times

  ---

• CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
  Use the matrix to reset (override) the method of the current transformation
• CanvasContext.setFillStyle(string| CanvasGradient color)
  Sets the fill color.
• CanvasContext.setStrokeStyle(string| CanvasGradient color)
  Sets the stroke color.
• CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)
  Set the shadow style.
• CanvasContext.setGlobalAlpha(number alpha)
  Sets the global brush transparency.
• CanvasContext.setLineWidth(number lineWidth)
  Sets the width of the line.
• CanvasContext.setLineJoin(string lineJoin)
  Sets the intersection style of the line
• CanvasContext.setLineCap(string lineCap)
  Sets the endpoint style of the line
• CanvasContext.setLineDash(Array.<number> pattern, number offset)
  Sets the dashed line style.
• CanvasContext.setMiterLimit(number miterLimit)
  Sets the maximum miter length. The miter length refers to the distance between the inner and outer corners at the intersection of two lines. This is only valid when CanvasContext.setLineJoin() is a miter. If the maximum skew length is exceeded, the connection will be displayed as lineJoin.
• CanvasContext.fillText(string text, number x, number y, number maxWidth)
  Draws the filled text on the canvas
• CanvasContext.setFontSize(number fontSize)
  Sets the font size of the font
• CanvasContext.setTextAlign(string align)
  Sets the alignment of text
• CanvasContext.setTextBaseline(string textBaseline)
  Sets the vertical alignment of text

Canvas

Canvas instances, available through SelectorQuery.

If canvas is configured with native prop properties, it will be handled with native rendering, and the base library 2.12.1 and iOS/Android 2.35.1 will be supported.

Canvas.getContext()

The method returns the drawing context of the Canvas

The context API of a canvas obtained through a selector query matches the web canvas

Canvas.createImage()

Create an image object, and only createSelectorQuery gets the canvas with this method