tencent cloud

Feedback

canvasContext

Last updated: 2024-07-12 19:23:41
    Function Description: The drawing context for the canvas component. canvasContext is the old interface, the new Canvas 2D interface is Web-compliant.

    Property Description

    Attributes
    Types
    Note
    fillStyle
    String
    Fill color. Usage is the same as CanvasContext.setFillStyle()
    strokeStyle
    String
    Border color. The usage aligns with CanvasContext.setFillStyle().
    font
    String
    -
    globalCompositeOperation
    String
    The type of compositing operation applied when drawing a new shape. The current Android version only applies compositing to fill fill blocks, compositing effects used for stroke line segments are source-over.
    The 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
    shadowOffsetX
    Number
    The horizontal offset of the shadow relative to the shape.
    shadowOffsetY
    Number
    The vertical offset of the shadow relative to the shape.
    shadowColor
    Number
    The color of the shadow.
    shadowBlur
    Number
    The blur level of the shadow.
    lineWidth
    Number
    The width of the line. The usage is the same as CanvasContext.setLineWidth().
    lineCap
    Number
    The style of the line's endpoints. The usage is the same as CanvasContext.setLineCap().
    lineJoin
    Number
    The style of the line's intersection. The usage is the same as CanvasContext.setLineJoin().
    miterLimit
    Number
    The maximum miter length. The usage is the same as CanvasContext.setMiterLimit().
    lineDashOffset
    Number
    The offset of the dashed line, with an initial value of zero.
    globalAlpha
    Number
    The global brush opacity. The range is 0-1, where 0 indicates complete transparency and 1 indicates complete opacity.
    
    Legal values for lineJoin
    
    Value
    Description
    bevel
    bevel
    round
    round
    miter
    miter

    Method Set

    arc

    The method is used as follows: CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise).
    Function Description: Creates an arc. The creation of a circle can specify the starting radian as 0 and the ending radian as 2 * Math.PI. Use the stroke or fill method to draw an arc in the canvas.
    Parameters and Descriptions:
    number x, the x-coordinate of the circle's center;
    number y, the y-coordinate of the circle's center;
    number r, the radius of the circle;
    number sAngle, the starting radian, in radians (in the 3 o'clock direction);
    number eAngle, the ending radian;
    number counterclockwise, whether the direction of the radian is counterclockwise.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    // Draw coordinates
    ctx.arc(100, 75, 50, 0, 2 * Math.PI)
    ctx.setFillStyle('#EEEEEE')
    ctx.fill()
    
    ctx.beginPath()
    ctx.moveTo(40, 75)
    ctx.lineTo(160, 75)
    ctx.moveTo(100, 15)
    ctx.lineTo(100, 135)
    ctx.setStrokeStyle('#AAAAAA')
    ctx.stroke()
    
    ctx.setFontSize(12)
    ctx.setFillStyle('black')
    ctx.fillText('0', 165, 78)
    ctx.fillText('0.5*PI', 83, 145)
    ctx.fillText('1*PI', 15, 78)
    ctx.fillText('1.5*PI', 83, 10)
    
    // Draw points
    ctx.beginPath()
    ctx.arc(100, 75, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('lightgreen')
    ctx.fill()
    
    ctx.beginPath()
    ctx.arc(100, 25, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('blue')
    ctx.fill()
    
    ctx.beginPath()
    ctx.arc(150, 75, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('red')
    ctx.fill()
    
    // Draw arc
    ctx.beginPath()
    ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
    ctx.setStrokeStyle('#333333')
    ctx.stroke()
    
    ctx.draw()
    The three key coordinates for arc(100, 75, 50, 0, 1.5 * Math.PI) are as follows:
    Green: Circle center (100, 75)
    Red: Starting radian (0)
    Blue: Ending radian (1.5 * Math.PI)
    
    
    

    arcTo

    The method is used as follows: CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)
    Function Description: Draws an arc path based on the control point and radius.
    Parameters and Descriptions:
    number x1, the x-axis coordinate of the first control point;
    number y1, the y-axis coordinate of the first control point;
    number x2, the x-axis coordinate of the second control point;
    number y2, the y-axis coordinate of the second control point;
    number radius, the radius of the arc.

    draw

    The method is used as follows: CanvasContext.draw(boolean reserve, function callback)
    Function Description: Renders the previously described elements (paths, transformations, styles) in the drawing context onto the canvas.
    Parameters and Descriptions:
    boolean reserve: Determines whether the current drawing continues from the previous one. If the reserve parameter is set to false, the native layer will clear the canvas before proceeding with the drawing; if the reserve parameter is set to true, the current content on the canvas will be preserved, and the content drawn by the drawCanvas call will be overlaid on top, default is false.
    function callback: The callback function executed upon completion of the drawing.
    Sample Code: In the second draw() call, reserve is set to true. Therefore, the result of the previous drawing is preserved, and the fillStyle set in the context to 'red' has defaulted back to 'black'.
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 100)
    ctx.draw()
    ctx.fillRect(50, 50, 150, 100)
    ctx.draw(true)
    
    
    

    drawImage

    The method is utilized as follows: CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
    Function Description: Draws an image onto the canvas.
    Parameters and Descriptions:
    string imageResource, the image resource to be drawn;
    number sx, the x-coordinate of the top-left corner of the source image's rectangular selection box;
    number sy, the y-coordinate of the top-left corner of the source image's rectangular selection box;
    number sWidth, the width of the source image's rectangular selection box;
    number sHeight, the height of the source image's rectangular selection box;
    number dx, the x-axis position of the image's top-left corner on the target canvas;
    number dy, the y-axis position of the image's top-left corner on the target canvas;
    number dWidth, the width of the image drawn on the target canvas, allowing for scaling of the drawn image;
    number dHeight, the height of the image drawn on the target canvas, allowing for scaling of the drawn image.
    Sample Code: There are three versions of the syntax as follows.
    drawImage(imageResource, dx, dy)
    drawImage(imageResource, dx, dy, dWidth, dHeight)
    drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    const ctx = wx.createCanvasContext('myCanvas')
    
    wx.chooseImage({
    success(res) {
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
    }
    })
    

    createLinearGradient

    The method is utilized as follows: CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)
    Function Description: Creates a linear gradient color. The returned CanvasGradient object requires the use of CanvasGradient.addColorStop() to specify gradient points, with at least two required.
    Parameters and Descriptions:
    number x0, the x-coordinate of the starting point;
    number y0, the y-coordinate of the starting point;
    number x1, the x-coordinate of the endpoint;
    number y1, the y-coordinate of the endpoint.
    Return Value: CanvasGradient.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    // Create linear gradient
    const grd = ctx.createLinearGradient(0, 0, 200, 0)
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')
    
    // Fill with gradient
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()
    

    createCircularGradient

    The method is utilized as follows: CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)
    Function Description: Creates a circular gradient color. The starting point is at the center of the circle, and the endpoint is on the circumference. The returned CanvasGradient object requires the use of CanvasGradient.addColorStop() to specify gradient points, with at least two required.
    Parameters and Descriptions:
    number x, the x-coordinate of the circle's center;
    number y, the y-coordinate of the circle's center;
    number r, the radius of the circle.
    Return Value: CanvasGradient.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    // Create circular gradient
    const grd = ctx.createCircularGradient(75, 50, 50)
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')
    
    // Fill with gradient
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()
    

    createPattern

    Function Description: A method for creating a pattern for a specified image, which can repeat the original image in a specified direction. The usage is as follows CanvasContext.createPattern(string image, string repetition).
    Parameters and Descriptions: string image, the source of the repeating image, supports code package paths and local temporary paths (local paths).
    Value
    Note
    repeat
    Repeats in both horizontal and vertical directions.
    repeat-x
    Repeats in the horizontal direction.
    repeat-y
    Repeats in the vertical direction.
    no-repeat
    Not repeating
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    constpattern=ctx.createPattern('/path/to/image','repeat-x')
    ctx.fillStyle=pattern
    ctx.fillRect(0,0,300,150)
    ctx.draw()

    measureText

    The usage of this method is Object CanvasContext.measureText(string text).
    Function Description: Measures the dimensions of the text. Currently, it only returns the width of the text, a synchronous interface.
    Parameters and Descriptions:
    string image: The source of the repeating image, supporting both the code package path and the local temporary path (local path).
    string repetition: How to repeat the image.
    Legitimate values of repetition
    Attributes
    Types
    Note
    width
    number
    The width of the text.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.font = 'italic bold 20px cursive'
    const metrics = ctx.measureText('Hello World')
    console.log(metrics.width)

    save

    The method is utilized as CanvasContext.save()
    Function Description: Saves the drawing context.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    // save the default fill style
    ctx.save()
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 100)
    
    // restore to the previous saved state
    ctx.restore()
    ctx.fillRect(50, 50, 150, 100)
    
    ctx.draw()
    

    restore

    The method is utilized as CanvasContext.restore()
    Function Description: Restore the previously saved drawing context.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    // save the default fill style
    ctx.save()
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 100)
    
    // restore to the previous saved state
    ctx.restore()
    ctx.fillRect(50, 50, 150, 100)
    
    ctx.draw()
    

    beginPath

    The method is utilized as CanvasContext.beginPath()
    Function Description: Initiate the creation of a path. It necessitates the invocation of fill or stroke to utilize the path for filling or outlining.
    At the outset, it is equivalent to invoking beginPath once.
    Within the same path, multiple settings such as setFillStyle, setStrokeStyle, setLineWidth, etc., the final setting prevails.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    // begin path
    ctx.rect(10, 10, 100, 30)
    ctx.setFillStyle('yellow')
    ctx.fill()
    
    // begin another path
    ctx.beginPath()
    ctx.rect(10, 40, 100, 30)
    
    // only fill this rect, not in current path
    ctx.setFillStyle('blue')
    ctx.fillRect(10, 70, 100, 30)
    
    ctx.rect(10, 100, 100, 30)
    
    // it will fill current path
    ctx.setFillStyle('red')
    ctx.fill()
    ctx.draw()
    

    closePath

    The method is utilized as CanvasContext.closePath()
    Function Description: Close a path. This will connect the start and end points. If the path is closed and fill or stroke is not invoked, and a new path is initiated, the previous path will not be rendered.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.moveTo(10, 10)
    ctx.lineTo(100, 10)
    ctx.lineTo(100, 100)
    ctx.closePath()
    ctx.stroke()
    ctx.draw()
    
    const ctx = wx.createCanvasContext('myCanvas')
    // begin path
    ctx.rect(10, 10, 100, 30)
    ctx.closePath()
    
    // begin another path
    ctx.beginPath()
    ctx.rect(10, 40, 100, 30)
    
    // only fill this rect, not in current path
    ctx.setFillStyle('blue')
    ctx.fillRect(10, 70, 100, 30)
    
    ctx.rect(10, 100, 100, 30)
    
    // it will fill current path
    ctx.setFillStyle('red')
    ctx.fill()
    ctx.draw()
    

    moveTo

    The method is utilized as CanvasContext.moveTo(number x, number y)
    Function Description: Move the path to a specified point in the canvas, without the need to create a line. Utilize the stroke method to draw the line.
    Parameters and Description:
    number x, the x-coordinate of the target position;
    number y, the y-coordinate of the target position.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.moveTo(10, 10)
    ctx.lineTo(100, 10)
    
    ctx.moveTo(10, 50)
    ctx.lineTo(100, 50)
    ctx.stroke()
    ctx.draw()
    

    lineTo

    The method is utilized as CanvasContext.lineTo(number x, number y)
    Function Description: Add a new point, then create a line from the last specified point to the target point, using the stroke method to draw the line.
    Parameters and Description:
    number x, the x-coordinate of the target position;
    number y, the y-coordinate of the target position.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.moveTo(10, 10)
    ctx.rect(10, 10, 100, 50)
    ctx.lineTo(110, 60)
    ctx.stroke()
    ctx.draw()
    

    quadraticCurveTo

    The method is utilized as CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
    Function Description: Create a quadratic Bézier curve path. The starting point of the curve is the previous point in the path.
    Parameters and Description:
    number cpx, the x-coordinate of the Bézier control point;
    number cpy, the y-coordinate of the Bézier control point;
    number x, the x-coordinate of the end point;
    number y, the y-coordinate of the end point.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    // Draw points
    ctx.beginPath()
    ctx.arc(20, 20, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('red')
    ctx.fill()
    
    ctx.beginPath()
    ctx.arc(200, 20, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('lightgreen')
    ctx.fill()
    
    ctx.beginPath()
    ctx.arc(20, 100, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('blue')
    ctx.fill()
    
    ctx.setFillStyle('black')
    ctx.setFontSize(12)
    
    // Draw guides
    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.lineTo(20, 100)
    ctx.lineTo(200, 20)
    ctx.setStrokeStyle('#AAAAAA')
    ctx.stroke()
    
    // Draw quadratic curve
    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.quadraticCurveTo(20, 100, 200, 20)
    ctx.setStrokeStyle('black')
    ctx.stroke()
    
    ctx.draw()
    The three key coordinates for moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20) are as follows:
    Red: Starting point (20, 20)
    Blue: Control point (20, 100)
    Green: Termination point (200, 20)
    

    bezierCurveTo

    The method is used as follows: CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
    Function Description: Creates a cubic Bezier curve path. The starting point of the curve is the previous point in the path.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    // Draw points
    ctx.beginPath()
    ctx.arc(20, 20, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('red')
    ctx.fill()
    
    ctx.beginPath()
    ctx.arc(200, 20, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('lightgreen')
    ctx.fill()
    
    ctx.beginPath()
    ctx.arc(20, 100, 2, 0, 2 * Math.PI)
    ctx.arc(200, 100, 2, 0, 2 * Math.PI)
    ctx.setFillStyle('blue')
    ctx.fill()
    
    ctx.setFillStyle('black')
    ctx.setFontSize(12)
    
    // Draw guides
    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.lineTo(20, 100)
    ctx.lineTo(150, 75)
    
    ctx.moveTo(200, 20)
    ctx.lineTo(200, 100)
    ctx.lineTo(70, 75)
    ctx.setStrokeStyle('#AAAAAA')
    ctx.stroke()
    
    // Draw quadratic curve
    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
    ctx.setStrokeStyle('black')
    ctx.stroke()
    
    ctx.draw()
    The three key coordinates for moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) are as follows:
    Red: Starting point (20, 20)
    Blue: Two control points (20, 100) (200, 100)
    Green: Termination point (200, 20)
    

    rect

    The method is used as follows: CanvasContext.rect(number x, number y, number width, number height)
    Function Description: Creates a rectangular path. The rectangle must be actually drawn on the canvas using the fill or stroke method.
    Parameters and Descriptions:
    number x, the x-coordinate of the top-left corner of the rectangular path;
    number y, the y-coordinate of the top-left corner of the rectangular path;
    number width, the width of the rectangular path;
    number height, the height of the rectangular path.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.rect(10, 10, 150, 75)
    ctx.setFillStyle('red')
    ctx.fill()
    ctx.draw()
    

    clip

    The method is used as follows: CanvasContext.clip()
    Function Description: Cuts any shape and size from the original canvas. Once an area is cut, all subsequent drawings will be confined within the cut area (unable to access other areas on the canvas). The current canvas area can be saved before using the clip method by using the save method, and can be restored at any time in the future using the restore method.
    Example Code
    const ctx = wx.createCanvasContext('myCanvas')
    
    wx.downloadFile({
    url: 'https://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
    success(res) {
    ctx.save()
    ctx.beginPath()
    ctx.arc(50, 50, 25, 0, 2 * Math.PI)
    ctx.clip()
    ctx.drawImage(res.tempFilePath, 25, 25)
    ctx.restore()
    ctx.draw()
    }
    })
    

    stroke

    The method is used as follows: CanvasContext.stroke()
    Function Description: Draws the border of the current path. The default color is black.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.moveTo(10, 10)
    ctx.lineTo(100, 10)
    ctx.lineTo(100, 100)
    ctx.stroke()
    ctx.draw()
    
    
    
    The path depicted by stroke() is calculated from beginPath(), but it does not include strokeRect().
    const ctx = wx.createCanvasContext('myCanvas')
    // begin path
    ctx.rect(10, 10, 100, 30)
    ctx.setStrokeStyle('yellow')
    ctx.stroke()
    
    // begin another path
    ctx.beginPath()
    ctx.rect(10, 40, 100, 30)
    
    // only stoke this rect, not in current path
    ctx.setStrokeStyle('blue')
    ctx.strokeRect(10, 70, 100, 30)
    
    ctx.rect(10, 100, 100, 30)
    
    // it will stroke current path
    ctx.setStrokeStyle('red')
    ctx.stroke()
    ctx.draw()
    
    
    

    strokeRect

    The method is used as follows: CanvasContext.strokeRect(number x, number y, number width, number height)
    Function Description: Draws a rectangle (non-filled). The color of the rectangle's outline is set using setStrokeStyle, if not set, the default color is black.
    Parameters and Descriptions:
    number x, the x-coordinate of the top-left corner of the rectangular path;
    number y, the y-coordinate of the top-left corner of the rectangular path;
    number width, the width of the rectangular path;
    number height, the height of the rectangular path.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setStrokeStyle('red')
    ctx.strokeRect(10, 10, 150, 75)
    ctx.draw()
    
    
    

    strokeText

    The method is used as follows: CanvasContext.strokeText(string text, number x, number y, number maxWidth)
    Function Description: A method to draw text outlines at the given (x, y) position.
    Parameters and Description:
    string text, the text to be drawn;
    number x, the x-axis coordinate of the text's starting point;
    number y, the y-axis coordinate of the text's starting point;
    number maxWidth, the maximum width to be drawn, optional.

    clearRect

    The method is used as follows: CanvasContext.clearRect(number x, number y, number width, number height)
    Function Description: Clears the content within the specified rectangular area on the canvas.
    Parameters and Descriptions:
    number x, the x-coordinate of the top-left corner of the rectangular path;
    number y, the y-coordinate of the top-left corner of the rectangular path;
    number width, the width of the rectangular path;
    number height, the height of the rectangular path.
    Example Code: clearRect does not draw a white rectangle in the specified area, but rather clears it. For a more intuitive understanding, a background color has been added to the canvas.
    <canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;" />
    
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
    ctx.fillRect(0, 0, 150, 200)
    ctx.setFillStyle('blue')
    ctx.fillRect(150, 0, 150, 200)
    ctx.clearRect(10, 10, 150, 75)
    ctx.draw()
    
    
    

    fill

    The method is used as follows: CanvasContext.fill()
    Function Description: Fills the content within the current path. The default fill color is black.
    Sample Code: If the current path is not closed, the fill() method will connect the start and end points, and then fill it.
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.moveTo(10, 10)
    ctx.lineTo(100, 10)
    ctx.lineTo(100, 100)
    ctx.fill()
    ctx.draw()
    The path filled by fill() is calculated from beginPath(), but it does not include fillRect().
    
    
    
    const ctx = wx.createCanvasContext('myCanvas')
    // begin path
    ctx.rect(10, 10, 100, 30)
    ctx.setFillStyle('yellow')
    ctx.fill()
    
    // begin another path
    ctx.beginPath()
    ctx.rect(10, 40, 100, 30)
    
    // only fill this rect, not in current path
    ctx.setFillStyle('blue')
    ctx.fillRect(10, 70, 100, 30)
    
    ctx.rect(10, 100, 100, 30)
    
    // it will fill current path
    ctx.setFillStyle('red')
    ctx.fill()
    ctx.draw()
    
    
    

    fillRect

    The method is used as follows: CanvasContext.fillRect(number x, number y, number width, number height)
    Function Description: Fills a rectangle. The fill color of the rectangle is set using setFillStyle, if not set, the default is black.
    Parameters and Descriptions:
    number x, the x-coordinate of the top-left corner of the rectangular path;
    number y, the y-coordinate of the top-left corner of the rectangular path;
    number width, the width of the rectangular path;
    number height, the height of the rectangular path.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 75)
    ctx.draw()
    
    
    

    fillText

    The method is used as follows: CanvasContext.fillText(string text, number x, number y, number maxWidth)
    Function Description: Draws filled text on the canvas.
    Parameters and Description:
    string text, the text output on the canvas;
    number x, the x-coordinate position of the top left corner of the drawn text;
    number y, the y-coordinate position of the top left corner of the drawn text;
    number maxWidth, the maximum width that needs to be drawn, optional.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.setFontSize(20)
    ctx.fillText('Hello', 20, 20)
    ctx.fillText('MINA', 100, 100)
    
    ctx.draw()
    
    
    

    scale

    The method is used as follows: CanvasContext.scale(number scaleWidth, number scaleHeight)
    Function Description: After calling, the x and y coordinates of the path created thereafter will be scaled. Multiple calls will multiply the factors.
    Parameters and Description:
    number scaleWidth, the scaling factor for the x-coordinate (1 = 100%, 0.5 = 50%, 2 = 200%);
    number scaleHeight, the scaling factor for the y-coordinate (1 = 100%, 0.5 = 50%, 2 = 200%).
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.strokeRect(10, 10, 25, 15)
    ctx.scale(2, 2)
    ctx.strokeRect(10, 10, 25, 15)
    ctx.scale(2, 2)
    ctx.strokeRect(10, 10, 25, 15)
    
    ctx.draw()
    
    
    

    rotate

    The method is used as follows: CanvasContext.rotate(number rotate)
    Function Description: Rotates the current coordinate axis clockwise with the origin as the center. Multiple calls will accumulate the rotation angle. The origin can be modified using the translate method.
    Parameters and Description: number rotate, rotation angle, calculated in radians as degrees * Math.PI/180; degrees range from 0-360.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.strokeRect(100, 10, 150, 100)
    ctx.rotate(20 * Math.PI / 180)
    ctx.strokeRect(100, 10, 150, 100)
    ctx.rotate(20 * Math.PI / 180)
    ctx.strokeRect(100, 10, 150, 100)
    
    ctx.draw()
    
    
    

    transform

    The method is used as follows: CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
    Function Description: A method to repeatedly overlay the current transformation using a matrix.
    Parameters and Description:
    number scaleX, horizontal scaling;
    number scaleY, vertical scaling;
    number skewX, horizontal skewing;
    number skewY, vertical skewing;
    number translateX, horizontal translation;
    number translateY, vertical translation.

    translate

    The method is used as follows: CanvasContext.translate(number x, number y)
    Function Description: Transforms the origin (0, 0) of the current coordinate system. The default coordinate system origin is the top left corner of the page.
    Parameters and Description:
    number x, horizontal coordinate translation;
    number y, vertical coordinate translation.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.strokeRect(10, 10, 150, 100)
    ctx.translate(20, 20)
    ctx.strokeRect(10, 10, 150, 100)
    ctx.translate(20, 20)
    ctx.strokeRect(10, 10, 150, 100)
    
    ctx.draw()
    
    
    

    setTransform

    The method is used as follows: CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
    Function Description: A method to reset (overwrite) the current transformation using a matrix.
    Parameters and Description:
    number scaleX, horizontal scaling;
    number scaleY, vertical scaling;
    number skewX, horizontal skewing;
    number skewY, vertical skewing;
    number translateX, horizontal translation;
    number translateY, vertical translation.

    setFillStyle

    The method is used as follows: CanvasContext.setFillStyle(string|CanvasGradient color)
    Function Description: Set the fill color.
    Parameters and Description: string CanvasGradient color, the fill color, with the default color being black.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 75)
    ctx.draw()
    

    setStrokeStyle

    The method is used as follows: CanvasContext.setStrokeStyle(string|CanvasGradient color)
    Function Description: Set the stroke color.
    Parameters and Description: string CanvasGradient color, the fill color, with the default color being black.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setStrokeStyle('red')
    ctx.strokeRect(10, 10, 150, 75)
    ctx.draw()
    
    
    

    setShadow

    The method is used as follows: CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)
    Function Description: Set the shadow style.
    Parameters and Description:
    number offsetX, the horizontal offset of the shadow relative to the shape, default value is 0;
    number offsetY, the vertical offset of the shadow relative to the shape, default value is 0;
    number blur, the blur level of the shadow, the larger the value, the more blurred it is. Range 0-100, default value is 0;
    string color, the color of the shadow. Default value is black.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
    ctx.setShadow(10, 50, 50, 'blue')
    ctx.fillRect(10, 10, 150, 75)
    ctx.draw()
    
    
    

    setGlobalAlpha

    The method is used as follows: CanvasContext.setGlobalAlpha(number alpha)
    Function Description: Set the global brush transparency.
    Parameters and Description: number alpha, transparency. Range 0-1, 0 indicates complete transparency, 1 indicates complete opacity.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 100)
    ctx.setGlobalAlpha(0.2)
    ctx.setFillStyle('blue')
    ctx.fillRect(50, 50, 150, 100)
    ctx.setFillStyle('yellow')
    ctx.fillRect(100, 100, 150, 100)
    
    ctx.draw()
    
    
    

    setLineWidth

    The method is used as follows: CanvasContext.setLineWidth(number lineWidth)
    Function Description: Set the width of the line.
    Parameters and Description: number lineWidth, the width of the line, unit: px.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.moveTo(10, 10)
    ctx.lineTo(150, 10)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineWidth(5)
    ctx.moveTo(10, 30)
    ctx.lineTo(150, 30)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineWidth(10)
    ctx.moveTo(10, 50)
    ctx.lineTo(150, 50)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineWidth(15)
    ctx.moveTo(10, 70)
    ctx.lineTo(150, 70)
    ctx.stroke()
    
    ctx.draw()
    
    
    

    setLineJoin

    The method is used as follows: CanvasContext.setLineJoin(string lineJoin)
    Function Description: Set the style of the line intersection.
    Parameters and Description: string lineJoin, the style of the line's end intersection.
    Value
    Note
    bevel
    Bevel
    round
    Rounded corner
    miter
    Sharp corner
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.moveTo(10, 10)
    ctx.lineTo(100, 50)
    ctx.lineTo(10, 90)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineJoin('bevel')
    ctx.setLineWidth(10)
    ctx.moveTo(50, 10)
    ctx.lineTo(140, 50)
    ctx.lineTo(50, 90)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineJoin('round')
    ctx.setLineWidth(10)
    ctx.moveTo(90, 10)
    ctx.lineTo(180, 50)
    ctx.lineTo(90, 90)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineJoin('miter')
    ctx.setLineWidth(10)
    ctx.moveTo(130, 10)
    ctx.lineTo(220, 50)
    ctx.lineTo(130, 90)
    ctx.stroke()
    
    ctx.draw()
    
    
    

    setLineCap

    The method is used as follows: CanvasContext.setLineCap(string lineCap)
    Function Description: Sets the style of the line's endpoint.
    Parameters and Description: string lineGap, the style of the line's termination junction.
    Value
    Note
    butt
    Adding flat edges to each end of the line
    round
    Adding round caps to each end of the line
    square
    Adding square caps to each end of the line
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.moveTo(10, 10)
    ctx.lineTo(150, 10)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineCap('butt')
    ctx.setLineWidth(10)
    ctx.moveTo(10, 30)
    ctx.lineTo(150, 30)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineCap('round')
    ctx.setLineWidth(10)
    ctx.moveTo(10, 50)
    ctx.lineTo(150, 50)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineCap('square')
    ctx.setLineWidth(10)
    ctx.moveTo(10, 70)
    ctx.lineTo(150, 70)
    ctx.stroke()
    
    ctx.draw()
    

    setLineDash

    The method is used as follows: CanvasContext.setLineDash(Array.<number> pattern, number offset)
    Function Description: Set the style of the dashed line.
    Parameters and Description: Array.<number> pattern, a set of numbers describing the alternating lengths of the drawn segments and gaps (in coordinate space units); number offset, the offset of the dashed line.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.setLineDash([10, 20], 5);
    
    ctx.beginPath();
    ctx.moveTo(0,100);
    ctx.lineTo(400, 100);
    ctx.stroke();
    
    ctx.draw()
    

    setMiterLimit

    The method is used as follows: CanvasContext.setMiterLimit(number miterLimit)
    Function Description: Set the maximum miter length. The miter length refers to the distance between the inner and outer angles at the intersection of two lines. It is only effective when CanvasContext.setLineJoin() is set to miter. If it exceeds the maximum miter length, the junction will be displayed as bevel in lineJoin.
    Parameters and Description: number miterLimit, the maximum miter length.
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.setLineWidth(10)
    ctx.setLineJoin('miter')
    ctx.setMiterLimit(1)
    ctx.moveTo(10, 10)
    ctx.lineTo(100, 50)
    ctx.lineTo(10, 90)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineWidth(10)
    ctx.setLineJoin('miter')
    ctx.setMiterLimit(2)
    ctx.moveTo(50, 10)
    ctx.lineTo(140, 50)
    ctx.lineTo(50, 90)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineWidth(10)
    ctx.setLineJoin('miter')
    ctx.setMiterLimit(3)
    ctx.moveTo(90, 10)
    ctx.lineTo(180, 50)
    ctx.lineTo(90, 90)
    ctx.stroke()
    
    ctx.beginPath()
    ctx.setLineWidth(10)
    ctx.setLineJoin('miter')
    ctx.setMiterLimit(4)
    ctx.moveTo(130, 10)
    ctx.lineTo(220, 50)
    ctx.lineTo(130, 90)
    ctx.stroke()
    
    ctx.draw()
    

    setFontSize

    The method is used as follows: CanvasContext.setFontSize(number fontSize)
    Function Description: Set the font size.
    Parameters and Description: number fontSize, the size of the font.
    Example Code
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.setFontSize(20)
    ctx.fillText('20', 20, 20)
    ctx.setFontSize(30)
    ctx.fillText('30', 40, 40)
    ctx.setFontSize(40)
    ctx.fillText('40', 60, 60)
    ctx.setFontSize(50)
    ctx.fillText('50', 90, 90)
    
    ctx.draw()
    
    
    

    setTextAlign

    The method is used as follows: CanvasContext.setTextAlign(string align)
    Function Description: Set the alignment of the text.
    Parameters and Description: string align, the alignment of the text.
    Value
    Note
    left
    Align Left
    center
    Align Center
    right
    Align Right
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.setStrokeStyle('red')
    ctx.moveTo(150, 20)
    ctx.lineTo(150, 170)
    ctx.stroke()
    
    ctx.setFontSize(15)
    ctx.setTextAlign('left')
    ctx.fillText('textAlign=left', 150, 60)
    
    ctx.setTextAlign('center')
    ctx.fillText('textAlign=center', 150, 80)
    
    ctx.setTextAlign('right')
    ctx.fillText('textAlign=right', 150, 100)
    
    ctx.draw()
    
    
    

    setTextBaseline

    The method is used as follows: CanvasContext.setTextBaseline(string textBaseline)
    Function Description: Sets the vertical alignment of the text.
    Parameters and Description: string textBaseline, the vertical alignment method of the text.
    Value
    Note
    top
    Align Top
    bottom
    Align Bottom
    middle
    Align Center
    normal
    Default Value
    Sample Code:
    const ctx = wx.createCanvasContext('myCanvas')
    
    ctx.setStrokeStyle('red')
    ctx.moveTo(5, 75)
    ctx.lineTo(295, 75)
    ctx.stroke()
    
    ctx.setFontSize(20)
    
    ctx.setTextBaseline('top')
    ctx.fillText('top', 5, 75)
    
    ctx.setTextBaseline('middle')
    ctx.fillText('middle', 50, 75)
    
    ctx.setTextBaseline('bottom')
    ctx.fillText('bottom', 120, 75)
    
    ctx.setTextBaseline('normal')
    ctx.fillText('normal', 200, 75)
    
    ctx.draw()
    
    
    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