Function Description: The drawing context of the canvas component.
Property Description
Attributes
Types
Note
fillStyle
String
Fill color. The usage is identical to CanvasContext.setFillStyle().
strokeStyle
String
Border color. The usage aligns with CanvasContext.setFillStyle().
font
String
-
globalCompositeOperation
String
The type of composite operation applied when drawing new shapes. Currently, the Android version only applies to the composition of fill blocks, and the composition effects for stroke segments are all source-over. The currently supported operations are:
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.
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
Function Description: Renders the previously described elements (paths, transformations, styles) in the drawing context onto the canvas, the method is used as follows: CanvasContext.draw(boolean reserve, function callback).
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.
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.
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.
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.
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 asCanvasContext.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.
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.
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.
Yes
No
Was this page helpful?