The drawing context of the canvas component.
Reference
Methods
| Property | Type | Description |
|---|
| fillStyle | string | The fill color, used in the same way as [CanvasContext.setFillStyle()]. |
| font | string | The current font style. It is a DOMString that conforms to the CSS font syntaxwith at least the font size and family passed. The default value is 10px sans-serif. |
| globalAlpha | number | The global brush transparency. The value range is 0-1. 0 indicates completely transparent and 1 indicates completely opaque. |
| globalCompositeOperation | string | The type of compositing operation applied when drawing a new shape. The Android version only supports merging fill blocks, and source-over is used to merge stroke line segments.
The following operations are supported:
- 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 |
| lineCap | "butt" | "round" | "square" | The endpoint style of the line, used in the same way as [CanvasContext.setLineCap()]. |
| lineDashOffset | number | The dashed line offset, with an initial value of 0. |
| lineJoin | "round" | "bevel" | "miter" | The intersection style of the line, used in the same way as [CanvasContext.setLineJoin()]。 |
| lineWidth | number | The width of the line, used in the same way as [CanvasContext.setLineWidth()]。 |
| miterLimit | number | The maximum miter length, used in the same ways as [CanvasContext.setMiterLimit()]。 |
| shadowBlur | number | The fuzziness level of the shadow. |
| shadowColor | number | The color of the shadow. |
| shadowOffsetX | number | The horizontal offset of the shadow relative to the shape. |
| shadowOffsetY | number | The vertical offset of the shadow relative to the shape. |
| strokeStyle | string | The border color, used in the same way as [CanvasContext.setFillStyle()]。 |
arc
Creates an arc.
- To create a circle, specify the start radian as 0 and the end radian as 2 * Math.PI.
- Use the
stroke or fill method to draw an arc in canvas.
The three key coordinates for the arc (100, 75, 50, 0, 1.5 * Math.PI) are as follows:
- Green: Center point (100, 75)
- Red: Start radian (0)
- Blue: End radian (1.5 * Math.PI)
Reference
(x: number, y: number, r: number, sAngle: number, eAngle: number, counterclockwise?: boolean) => void
| Property | Type | Description |
|---|
| x | number | The x-coordinate of the center point. |
| y | number | The y-coordinate of the center point. |
| r | number | The radius of the circle. |
| sAngle | number | The start radian (at the 3 o'clock position). |
| eAngle | number | The end radian. |
| counterclockwise | boolean | Indicates whether the direction of the arc is counterclockwise. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
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)
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()
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.arc | ✔️ | | |
arcTo
Draws an arc path based on control points and radius.
Reference
(x1: number, y1: number, x2: number, y2: number, radius: number) => void
| Property | Type | Description |
|---|
| x1 | number | The x-coordinate of the first control point. |
| y1 | number | The y-coordinate of the first control point. |
| x2 | number | The x-coordinate of the second control point. |
| y2 | number | The y-coordinate of the second control point. |
| radius | number | The radius of the arc. |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.arcTo | ✔️ | | |
beginPath
Starts to create a path. You must call fill or stroke to use the path for fill or stroke operations.
- At the very beginning, it is equivalent to calling
beginPath once. - If there are multiple settings of
setFillStyle, setStrokeStyle and setLineWidth in a path, the last one set prevails.
Reference
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.beginPath | ✔️ | | |
bezierCurveTo
Creates a cubic Bézier curve path. The start point of the curve is the previous point in the path.
The three key coordinates for moveTo (20, 20) and bezierCurveTo (20, 100, 200, 100, 200, 20) are as follows:
- Red: Start point (20, 20)
- Blue: Two control points (20, 100) (200, 100)
- Green: End point (200, 20)
Reference
(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void
| Property | Type | Description |
|---|
| cp1x | number | The x-coordinate of the first Bézier control point. |
| cp1y | number | The y-coordinate of the first Bézier control point. |
| cp2x | number | The x-coordinate of the second Bézier control point. |
| cp2y | number | The y-coordinate of the second Bézier control point. |
| x | number | The x-coordinate of the end point. |
| y | number | The y-coordinate of the end point. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
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)
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()
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.bezierCurveTo | ✔️ | | |
clearRect
Clears the content in the specified rectangular area on the canvas.
Reference
(x: number, y: number, width: number, height: number) => void
| Property | Type | Description |
|---|
| x | number | The x-coordinate of the top-left corner of the rectangular path. |
| y | number | The y-coordinate of the top-left corner of the rectangular path. |
| width | number | The width of the rectangular path. |
| height | number | The height of the rectangular path. |
Sample Code
Instead of drawing a white rectangle over the selected area, the clearRect operation clears the content in this rectangle. The following example adds a layer of background color to the canvas for demonstration purposes.
<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.clearRect | ✔️ | | |
clip
Cuts an area of any size and shape from the original canvas. Once an area has been cut, all subsequent drawings are limited to the cut area (the other areas of the canvas cannot be accessed). You can use the save method to save the current canvas area before using the clip method. Then, you can use the restore method to restore the canvas at any later time.
Reference
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
Taro.downloadFile({
url: 'https://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
success: function(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()
}
})
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.clip | ✔️ | | |
closePath
Closes a path by connecting the start and end points. If you do not call fill or stroke and start a new path after closing the path, the previous path will not be rendered.
Reference
Sample Code
Example 1
const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()
Example 2
const ctx = Taro.createCanvasContext('myCanvas')
ctx.rect(10, 10, 100, 30)
ctx.closePath()
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.closePath | ✔️ | | |
createPattern
Creates a pattern for the specified image. It can repeat the image in the specified direction.
Reference
(image: string, repetition: "repeat" | "repeat-x" | "repeat-y" | "no-repeat") => void
| Property | Type | Description |
|---|
| image | string | The source of the repeated image. Only in-package paths and temporary paths are supported. |
| repetition | "repeat" | "repeat-x" | "repeat-y" | "no-repeat" | Indicates how to repeat the image. |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.createPattern | ✔️ | | |
draw
Draws the objects (path, transformation, and style) previously described in the drawing context to the canvas.
Reference
(reserve?: boolean, callback?: (...args: any[]) => any) => void
| Property | Type | Description |
|---|
| reserve | boolean | Indicates whether this drawing follows the previous drawing. If the reserve parameter is false (default), the native layer clears the canvas before drawing the content of this call. If the reserve parameter is true, the content on the current canvas is retained and the content of the drawCanvas call is drawn over it. |
| callback | (...args: any[]) => any | The callback function executed after the drawing is completed. |
Sample Code
Example 1
If the reserve parameter for the second draw() is true, the content drawn by the previous operation is retained. In the context settings, the fillStyle value 'red' changes to the default value 'black'.
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw(true)
Example 2
If the reserve parameter for the second draw() is false, the content drawn by the previous operation is not retained. In the context settings, the fillStyle value is still 'red'.
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.draw | ✔️ | | |
drawImage
Draws an image to the canvas.
Reference
{ (imageResource: string, dx: number, dy: number): void; (imageResource: string, dx: number, dy: number, dWidth: number, dHeight: number): void; (imageResource: string, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): void; }
| Property | Type | Description |
|---|
| imageResource | string | The source of the image to draw. |
| sx | number | The x-coordinate of the top-left corner of the source image's rectangular selection box. |
| sy | number | The y-coordinate of the top-left corner of the source image's rectangular selection box. |
| sWidth | number | The width of the source image's rectangular selection box. |
| sHeight | number | The height of the source image's rectangular selection box. |
| dx | number | The x-axis position of the image's top-left corner on the destination canvas. |
| dy | number | The y-axis position of the image's top-left corner on the destination canvas. |
| dWidth | number | The width of the image drawn on the canvas. The drawn image can be zoomed in/out. |
| dHeight | number | The height of the image drawn on the canvas. The drawn image can be zoomed in/out. |
Sample Code
The code can be written in three ways:
- drawImage(imageResource, dx, dy)
- drawImage(imageResource, dx, dy, dWidth, dHeight)
- drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) (supported as of 1.9.0)
const ctx = Taro.createCanvasContext('myCanvas')
Taro.chooseImage({
success: function(res){
ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
ctx.draw()
}
})
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.drawImage | ✔️ | | |
fill
Fills the content in the current path. The default fill color is black.
Reference
Sample Code
Example 1
If the current path is not closed, the fill() method connects the start and end points and then fills the path.
const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()
Example 2
The path filled via fill() is calculated starting from beginPath(), and fillRect() is not included.
const ctx = Taro.createCanvasContext('myCanvas')
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.fill | ✔️ | | |
fillRect
Fills a rectangle. Use setFillStyle to set the fill color, which is black by default.
Reference
(x: number, y: number, width: number, height: number) => void
| Property | Type | Description |
|---|
| x | number | The x-coordinate of the top-left corner of the rectangular path. |
| y | number | The y-coordinate of the top-left corner of the rectangular path. |
| width | number | The width of the rectangular path. |
| height | number | The height of the rectangular path. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.fillRect | ✔️ | | |
fillText
Draws filled text on the canvas.
Reference
(text: string, x: number, y: number, maxWidth?: number) => void
| Property | Type | Description |
|---|
| text | string | The text output on the canvas. |
| x | number | The x-coordinate of the top-left corner of the text to be drawn. |
| y | number | The y-coordinate of the top-left corner of the text to be drawn. |
| maxWidth | number | The maximum width of the drawing (optional). |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFontSize(20)
ctx.fillText('Hello', 20, 20)
ctx.fillText('MINA', 100, 100)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.fillText | ✔️ | | |
lineTo
Adds a new point and then creates a line from the last specified point to the target point. Use the stroke method to draw a line.
Reference
(x: number, y: number) => void
| Property | Type | Description |
|---|
| x | number | The x-coordinate of the destination location. |
| y | number | The y-coordinate of the destination location. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.lineTo | ✔️ | | |
moveTo
Moves the path to the specified point on the canvas without creating lines. Use the stroke method to draw lines.
Reference
(x: number, y: number) => void
| Property | Type | Description |
|---|
| x | number | The x-coordinate of the destination location. |
| y | number | The y-coordinate of the destination location. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.moveTo(10, 50)
ctx.lineTo(100, 50)
ctx.stroke()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.moveTo | ✔️ | | |
quadraticCurveTo
Creates a quadratic Bézier curve path. The start point of the curve is the previous point in the path.
The three key coordinates for moveTo(20, 20) and quadraticCurveTo(20, 100, 200, 20) are as follows:
- Red: Start point (20, 20)
- Blue: Control point (20, 100)
- Green: End point (200, 20)
Reference
(cpx: number, cpy: number, x: number, y: number) => void
| Property | Type | Description |
|---|
| cpx | number | The x-coordinate of the Bézier control point. |
| cpy | number | The y-coordinate of the Bézier control point. |
| x | number | The x-coordinate of the end point. |
| y | number | The y-coordinate of the end point. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
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)
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.quadraticCurveTo | ✔️ | | |
rect
Creates a rectangular path. You must use the fill or stroke method to actually draw the rectangle to the canvas.
Reference
(x: number, y: number, width: number, height: number) => void
| Property | Type | Description |
|---|
| x | number | The x-coordinate of the top-left corner of the rectangular path. |
| y | number | The y-coordinate of the top-left corner of the rectangular path. |
| width | number | The width of the rectangular path. |
| height | number | The height of the rectangular path. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.rect | ✔️ | | |
restore
Restores a drawing context that is previously saved.
Reference
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.restore()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.restore | ✔️ | | |
rotate
Rotates the current axis clockwise around the origin point. The rotation angles of multiple calls will be superimposed. The origin point can be modified using the translate method.
Reference
| Property | Type | Description |
|---|
| rotate | number | The rotation angle in radians (degrees * Math.PI/180; degrees: 0-360). |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.rotate | ✔️ | | |
save
Saves the drawing context.
Reference
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.restore()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.save | ✔️ | | |
scale
Zooms in/out the x- and y- coordinates of the path created after the call. The scales in multiple calls are multiplied.
Reference
(scaleWidth: number, scaleHeight: number) => void
| Property | Type | Description |
|---|
| scaleWidth | number | The scale for horizontal coordinate zoom (1 = 100%, 0.5 = 50%, 2 = 200%). |
| scaleHeight | number | The scale for vertical coordinate zoom (1 = 100%, 0.5 = 50%, 2 = 200%). |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.scale | ✔️ | | |
setFillStyle
Sets the fill color.
Reference
(color: string | CanvasGradient) => void
| Property | Type | Description |
|---|
| color | string | CanvasGradient | The fill color. The default color is black. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setFillStyle | ✔️ | | |
setFontSize
Sets the font size.
Reference
(fontSize: number) => void
| Property | Type | Description |
|---|
| fontSize | number | The font size. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setFontSize | ✔️ | | |
setGlobalAlpha
Sets the global brush transparency.
Reference
| Property | Type | Description |
|---|
| alpha | number | The transparency. The value range is 0-1. 0 indicates completely transparent and 1 indicates completely opaque. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setGlobalAlpha | ✔️ | | |
setLineCap
Sets the endpoint style of the line.
Reference
(lineCap: "butt" | "round" | "square") => void
| Property | Type | Description |
|---|
| lineCap | "butt" | "round" | "square" | The endpoint style of the line. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setLineCap | ✔️ | | |
setLineDash
Sets the dashed line style.
Reference
(pattern: number[], offset: number) => void
| Property | Type | Description |
|---|
| pattern | number[] | A set of numbers describing the length and spacing of the line segments (unit: coordinate space) |
| offset | number | The dashed line offset. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setLineDash([10, 20], 5);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setLineDash | ✔️ | | |
setLineJoin
Sets the intersection style of the line.
Reference
(lineJoin: "round" | "bevel" | "miter") => void
| Property | Type | Description |
|---|
| lineJoin | "round" | "bevel" | "miter" | The intersection style of the line. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setLineJoin | ✔️ | | |
setLineWidth
Sets the width of the line.
Reference
(lineWidth: number) => void
| Property | Type | Description |
|---|
| lineWidth | number | The witdth of the line in pixels. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setLineWidth | ✔️ | | |
setMiterLimit
Sets the maximum miter length. The miter length is the distance between the inner corner and outer corner at the intersection of two lines. This value is valid when CanvasContext.setLineJoin() is set to miter. When the maximum miter length is exceeded, the lineJoin at the intersection takes the value of bevel.
Reference
(miterLimit: number) => void
| Property | Type | Description |
|---|
| miterLimit | number | The maximum miter length. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setMiterLimit | ✔️ | | |
setShadow
Sets the shadow style.
Reference
(offsetX: number, offsetY: number, blur: number, color: string) => void
| Property | Type | Description |
|---|
| offsetX | number | The horizontal offset of the shadow relative to the shape. The default value is 0. |
| offsetY | number | The vertical offset of the shadow relative to the shape. The default value is 0. |
| blur | number | The fuzziness level of the shadow. Higher values indicate greater fuzziness. The value range is 0-100 and the default value is 0. |
| color | string | The color of the shadow. The default value is black. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.setShadow(10, 50, 50, 'blue')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setShadow | ✔️ | | |
setStrokeStyle
Sets the border color.
Reference
(color: string | CanvasGradient) => void
| Property | Type | Description |
|---|
| color | string | CanvasGradient | The border color. The default color is black. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setStrokeStyle | ✔️ | | |
setTextAlign
Sets the text alignment.
Reference
(align: "left" | "center" | "right") => void
| Property | Type | Description |
|---|
| align | "left" | "center" | "right" | The text alignment method. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setTextAlign | ✔️ | | |
setTextBaseline
Sets the vertical text alignment.
Reference
(textBaseline: "top" | "bottom" | "middle" | "normal") => void
| Property | Type | Description |
|---|
| textBaseline | "top" | "bottom" | "middle" | "normal" | The vertical text alignment method. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setTextBaseline | ✔️ | | |
Resets (overrides) the current transformation with matrix.
Reference
(scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number) => void
| Property | Type | Description |
|---|
| scaleX | number | Horizontal zoom |
| scaleY | number | Vertical zoom |
| skewX | number | Horizontal skew |
| skewY | number | Vertical skew |
| translateX | number | Horizontal translation |
| translateY | number | Vertical translation |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.setTransform | ✔️ | | |
stroke
Draws the borders of the current path. The default color is black.
Reference
Sample Code
Example 1
const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()
Example 2
The path described via stroke() is calculated starting from beginPath(), and strokeRect() is not included.
const ctx = Taro.createCanvasContext('myCanvas')
ctx.rect(10, 10, 100, 30)
ctx.setStrokeStyle('yellow')
ctx.stroke()
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
ctx.setStrokeStyle('blue')
ctx.strokeRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.stroke | ✔️ | | |
strokeRect
Draws (but not fills) a rectangle. Use setStrokeStyle to set the line color for the rectangle. The default color is black.
Reference
(x: number, y: number, width: number, height: number) => void
| Property | Type | Description |
|---|
| x | number | The x-coordinate of the top-left corner of the rectangular path. |
| y | number | The y-coordinate of the top-left corner of the rectangular path. |
| width | number | The width of the rectangular path. |
| height | number | The height of the rectangular path. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.strokeRect | ✔️ | | |
strokeText
Draws text strokes at a given position (x, y).
Reference
(text: string, x: number, y: number, maxWidth?: number) => void
| Property | Type | Description |
|---|
| text | string | The text to be drawn. |
| x | number | The x-coordinate of the text start point. |
| y | number | The y-coordinate of the text start point. |
| maxWidth | number | The maximum width of the drawing (optional). |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.strokeText | ✔️ | | |
Multiplies the current transformation with matrix.
Reference
(scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number) => void
| Property | Type | Description |
|---|
| scaleX | number | Horizontal zoom |
| scaleY | number | Vertical zoom |
| skewX | number | Horizontal skew |
| skewY | number | Vertical skew |
| translateX | number | Horizontal translation |
| translateY | number | Vertical translation |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.transform | ✔️ | | |
translate
Translates the origin point (0, 0) of the current coordinate system. By default, the origin point of the coordinate system is the top-left corner of the page.
Reference
(x: number, y: number) => void
| Property | Type | Description |
|---|
| x | number | The horizontal coordinate offset. |
| y | number | The vertical coordinate offset. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.translate | ✔️ | | |
measureText
Measures the text size. This synchronous API only returns the text width.
Reference
(text: string) => TextMetrics
| Property | Type | Description |
|---|
| text | string | The text to be measured. |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.measureText | ✔️ | | |
createCircularGradient
Creates a circular color gradient. The start point is at the center of the circle and the end point is in the outer ring. The returned CanvasGradient object must use CanvasGradient.addColorStop() to specify at least two gradient points.
Reference
(x: number, y: number, r: number) => CanvasGradient
| Property | Type | Description |
|---|
| x | number | The x-coordinate of the center point. |
| y | number | The y-coordinate of the center point. |
| r | number | The radius of the circle. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.createCircularGradient | ✔️ | | |
createLinearGradient
Creates a linear color gradient. The returned CanvasGradient object must use CanvasGradient.addColorStop() to specify at least two gradient points.
Reference
(x0: number, y0: number, x1: number, y1: number) => CanvasGradient
| Property | Type | Description |
|---|
| x0 | number | The x-coordinate of the start point. |
| y0 | number | The y-coordinate of the start point. |
| x1 | number | The x-coordinate of the end point. |
| y1 | number | The y-coordinate of the end point. |
Sample Code
const ctx = Taro.createCanvasContext('myCanvas')
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.createLinearGradient | ✔️ | | |
Parameters
repetition
Indicates how to repeat the image.
| Property | Description |
|---|
| repeat | Repeat horizontally and vertically |
| repeat-x | Repeat horizontally |
| repeat-y | Repeat vertically |
| no-repeat | Do not repeat |
lineCap
参数 lineCap 可选值
| Property | Description |
|---|
| butt | Adds a straight edge to each end of the line |
| round | Adds a round line cap to each end of the line |
| square | Adds a square line cap to each end of the line |
lineJoin
Valid values of lineJoin
| Property | Description |
|---|
| bevel | Bevel |
| round | Round |
| miter | Sharp |
align
Valid values of align
| Property | Description |
|---|
| left | Left aligned |
| center | Center aligned |
| right | Right aligned |
textBaseline
Valid values of textBaseline
| Property | Description |
|---|
| top | Top aligned |
| bottom | Bottom aligned |
| middle | Center aligned |
| normal | |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|
| CanvasContext.arc | ✔️ | | |
| CanvasContext.arcTo | ✔️ | | |
| CanvasContext.beginPath | ✔️ | | |
| CanvasContext.bezierCurveTo | ✔️ | | |
| CanvasContext.clearRect | ✔️ | | |
| CanvasContext.clip | ✔️ | | |
| CanvasContext.closePath | ✔️ | | |
| CanvasContext.createPattern | ✔️ | | |
| CanvasContext.draw | ✔️ | | |
| CanvasContext.drawImage | ✔️ | | |
| CanvasContext.fill | ✔️ | | |
| CanvasContext.fillRect | ✔️ | | |
| CanvasContext.fillText | ✔️ | | |
| CanvasContext.lineTo | ✔️ | | |
| CanvasContext.moveTo | ✔️ | | |
| CanvasContext.quadraticCurveTo | ✔️ | | |
| CanvasContext.rect | ✔️ | | |
| CanvasContext.restore | ✔️ | | |
| CanvasContext.rotate | ✔️ | | |
| CanvasContext.save | ✔️ | | |
| CanvasContext.scale | ✔️ | | |
| CanvasContext.setFillStyle | ✔️ | | |
| CanvasContext.setFontSize | ✔️ | | |
| CanvasContext.setGlobalAlpha | ✔️ | | |
| CanvasContext.setLineCap | ✔️ | | |
| CanvasContext.setLineDash | ✔️ | | |
| CanvasContext.setLineJoin | ✔️ | | |
| CanvasContext.setLineWidth | ✔️ | | |
| CanvasContext.setMiterLimit | ✔️ | | |
| CanvasContext.setShadow | ✔️ | | |
| CanvasContext.setStrokeStyle | ✔️ | | |
| CanvasContext.setTextAlign | ✔️ | | |
| CanvasContext.setTextBaseline | ✔️ | | |
| CanvasContext.setTransform | ✔️ | | |
| CanvasContext.stroke | ✔️ | | |
| CanvasContext.strokeRect | ✔️ | | |
| CanvasContext.strokeText | ✔️ | | |
| CanvasContext.transform | ✔️ | | |
| CanvasContext.translate | ✔️ | | |
| CanvasContext.measureText | ✔️ | | |
| CanvasContext.createCircularGradient | ✔️ | | |
| CanvasContext.createLinearGradient | ✔️ | | |