May 19, 2021 WeChat Mini Program Development Document
Drawing interfaces and methods
All
<canvas/>
must be done with JavaScript:
WXML: (We'll use this WXML as a template in the next example if there's no special declaration, don't repeat it)
<canvas canvas-id="myCanvas" style="border: 1px solid;"/>
JS: (We'll put JS in onLoad in the next example)
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
First, we need to create a Canvas drawing context for CanvasContext.
CanvasContext is an object built into a small program and has some drawing methods:
const ctx = wx.createCanvasContext('myCanvas')
Next, let's describe what to draw in Canvas.
Set the fill color of the drawing context to red:
ctx.setFillStyle('red')
Draw
fillRect(x, y, width, height)
method, filled with the red just set:
ctx.fillRect(10, 10, 150, 75)
Tell
<canvas/>
draw the description you just made:
ctx.draw()