tencent cloud

Feedback

Canvas Overview

Last updated: 2024-07-12 19:25:42

    createOffscreenCanvas

    This API is used via OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this).
    Feature Description: Creates an instance of an offscreen canvas.
    Parameter and Description:
    number width: The width of the canvas.
    number height: The height of the canvas.
    object this: this of the current component instance under Custom Components
    Object object
    Attribute
    Type
    Default value
    Required
    Description
    type
    string
    webgl
    No
    Type of created offscreen canvas
    width
    number
    
    No
    Canvas Width
    height
    number
    
    No
    Canvas Height
    compInst
    Component
    
    No
    "This" of the current component instance in the context of custom components
    Object.type
    Legal value
    Description
    webgl
    Webgl type context
    2d
    2d type context

    createCanvasContext

    This API is used via CanvasContext wx.createCanvasContext(string canvasId, Object this).
    Feature Description: Creates a canvasContext object for canvas drawing context.
    Parameter and Description:
    string canvasId: The canvas-id attribute of the <canvas> component for which the context is to be obtained.
    Object this: In the context of custom components, "this" signifies the search for the <canvas> possessing the canvas-id within this custom component. If omitted, the search will not be conducted within any custom components.
    Return Value: canvasContext.

    canvasToTempFilePath

    This API is used via wx.canvasToTempFilePath(Object object, Object this).
    Feature Description: Exports the content of a specified area on the current canvas, generating an image of a specified size. Calling this method within the draw() callback ensures successful image export.
    Parameter and Description: Object.
    Attribute
    Type
    Default value
    Required
    Description
    x
    number
    0
    No
    Horizontal coordinate of the top left corner of the specified canvas area
    y
    number
    0
    No
    Vertical coordinate of the top left corner of the specified canvas area
    width
    number
    Canvas width - x
    No
    The width of the specified canvas area.
    height
    number
    Canvas height - y
    No
    The height of the specified canvas area.
    destWidth
    number
    Width multiplied by screen pixel density.
    No
    The width of the output image.
    destHeight
    number
    Height multiplied by screen pixel density.
    No
    The height of the output image.
    canvasId
    string
    -
    Yes
    Canvas identifier, canvas-id passed into the <canvas> component.
    fileType
    string
    png
    No
    Type of the target file.
    quality
    number
    -
    Yes
    The quality of the image, currently only effective for jpg. The value range is (0, 1]. If not within the range, it is treated as 1.0.
    success
    function
    -
    No
    Callback Function of Successful Interface Call
    fail
    function
    -
    No
    Callback Function of Failing Interface Call
    complete
    function
    -
    No
    Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations)
    Valid values of object.fileType
    Value
    Description
    jpg
    JPG image
    png
    PNG image
    Result of res callback for object.success
    Attribute
    Type
    Description
    tempFilePath
    string
    Temporary path to the generated file (local path)
    Sample Code
    wx.canvasToTempFilePath({
    x: 100,
    y: 200,
    width: 50,
    height: 50,
    destWidth: 100,
    destHeight: 100,
    canvasId: 'myCanvas',
    success(res) {
    console.log(res.tempFilePath)
    }
    })

    canvasPutImageData

    This API is used via wx.canvasPutImageData(Object object, Object this).
    Feature Description: Draws pixel data onto the canvas. In the context of a custom component, the second parameter passes in the custom component instance "this", to manipulate the canvas component in the component.
    Parameter 1: Object.
    Attribute
    Type
    Default value
    Required
    Description
    canvasId
    string
    -
    Yes
    Canvas identifier, the attribute of the canvas-id passed into the <canvas> component.
    data
    Uint8ClampedArray
    -
    Yes
    Image pixel data, a one-dimensional array, with every four items representing the RGBA of a pixel.
    x
    number
    -
    Yes
    The position offset of the source image data in the target canvas (offset in the x-axis direction).
    y
    number
    -
    Yes
    The position offset of the source image data in the target canvas (offset in the y-axis direction).
    width
    number
    -
    Yes
    The width of the source image data's rectangular area.
    height
    number
    -
    Yes
    The height of the source image data's rectangular area.
    success
    function
    -
    No
    Callback Function of Successful Interface Call
    fail
    function
    -
    No
    Callback Function of Failing Interface Call
    complete
    function
    -
    No
    Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations)
    Parameter 2: Object this, under the custom component, the current component instance's this, to operate within the <canvas> component.
    Sample Code
    const data = new Uint8ClampedArray([255, 0, 0, 1])
    wx.canvasPutImageData({
    canvasId: 'myCanvas',
    x: 0,
    y: 0,
    width: 1,
    data,
    success(res) {}
    })

    canvasGetImageData

    This API is used via wx.canvasGetImageData(Object object, Object this).
    Feature Description: Gets the implicit pixel data from the canvas area.
    Parameter 1: Object.
    Attribute
    Type
    Default value
    Required
    Description
    canvasId
    string
    -
    Yes
    Canvas identifier, the attribute of the canvas-id passed into the component <canvas>.
    x
    number
    -
    Yes
    The horizontal coordinate of the top-left corner of the rectangular area of the image data to be extracted.
    y
    number
    -
    Yes
    The vertical coordinate of the top-left corner of the rectangular area of the image data to be extracted.
    width
    number
    -
    Yes
    The width of the top-left corner of the rectangular area of the image data to be extracted.
    height
    number
    -
    Yes
    The height of the top-left corner of the rectangular area of the image data to be extracted.
    success
    function
    -
    No
    Callback Function of Successful Interface Call
    fail
    function
    -
    No
    Callback Function of Failing Interface Call
    complete
    function
    -
    No
    Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations)
    Parameters for object.success callback function: Object res.
    Attribute
    Type
    Description
    width
    number
    The width of the image data rectangle.
    height
    number
    The height of the source image data rectangle.
    data
    Uint8ClampedArray
    Image pixel data, a one-dimensional array, with every four items representing the RGBA of a pixel.
    Parameter 2:Object this, under Custom Components, this of the current component instance to manipulate <canvas> components within the component.
    The parameter of the object.success callback function: Object this, "this" of the current component instance under custom components, used to operate the <canvas> component within.
    Sample Code
    wx.canvasGetImageData({
    canvasId: 'myCanvas',
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
    }
    })

    Image

    Feature Description: Image object.
    Parameter and Description
    Attribute
    Type
    Description
    src
    string
    The URL of the image
    width
    number
    The actual width of the image
    height
    number
    The actual height of the image
    referrerPolicy
    string
    origin: Sends the complete referrer; no-referrer: Not to send. The format is fixed as https://servicewechat.com/{appid}/{version}/page-frame.html, where {appid} is the appid of the mini program, {version} is the version number of the mini program. A version number of 0 indicates a development version, trial version, or review version. A version number of devtools indicates a developer tool, and the rest are official versions.
    onload
    function
    Callback function triggered upon the completion of image loading
    onerror
    function
    Callback function triggered when an error occurs during image loading

    ImageData

    Feature Description: ImageData object.
    Parameter and Description
    Attribute
    Type
    Description
    width
    number
    Describe the actual width of ImageData using pixels.
    height
    number
    Describe the actual height of ImageData using pixels.
    data
    Uint8ClampedArray
    A one-dimension array containing data in RGBA order, represented by integers ranging from 0 to 255 (inclusive).

    canvasGradient

    Feature Description: Gradient object.

    .addColorStop

    This method is used via CanvasGradient.addColorStop(number stop, Color color).
    Feature Description: Adds a gradient point of color. Parts less than the minimum stop value will be rendered according to the color of the minimum stop value, and parts greater than the maximum stop value will be rendered according to the color of the maximum stop value, equivalent to CanvasGradient.addColorStop(number stop, Color color).
    Parameter 1: number stop, indicating the position between the start and end of the gradient, range from 0 to 1.
    Parameter 2: Color color, the color of the gradient point.
    Sample Code
    const ctx = wx.createCanvasContext('myCanvas')
    
    // Create circular gradient
    const grd = ctx.createLinearGradient(30, 10, 120, 10)
    grd.addColorStop(0, 'red')
    grd.addColorStop(0.16, 'orange')
    grd.addColorStop(0.33, 'yellow')
    grd.addColorStop(0.5, 'green')
    grd.addColorStop(0.66, 'cyan')
    grd.addColorStop(0.83, 'blue')
    grd.addColorStop(1, 'purple')
    
    // Fill with gradient
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()

    RenderingContext

    Feature Description: Canvas drawing context.
    The CanvasRenderingContext2D object can be obtained through the Canvas.getContext('2d') interface, implementing the properties and methods defined by the HTML Canvas 2D Context.
    The WebGLRenderingContext object can be obtained through the Canvas.getContext('webgl') or OffscreenCanvas.getContext('webgl') interface, implementing all properties, methods, and constants defined by WebGL 1.0.

    CanvasContext

    For more details, see canvasContext.

    OffscreenCanvas

    For more details, see OffscreenCanvas.

    Path2D

    For more details, see Path2D.

    Canvas

    For more details, see Canvas.

    Color

    For more details, see Color.
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support