Canvas Canvas

• Function Description: Canvas, this component is Native Component , please pay attention to the relevant restrictions when using it, and the relevant API can be found in Canvas, this component is wx.createCanvasContext , now supports the new Canvas 2D interface, the old version of the interface is no longer maintained.

• Parameters and descriptions::

Properties	Type	Default value	Description
type	string	2d	Supports canvas type, currently only supports 2d
canvas-id	string	-	Unique identifier of canvas component
disable-scroll	boolean	false	When moving in canvas and there are gesture events bound, screen scrolling and pull-down refresh are prohibited
bindtouchstart	eventhandle	-	Finger touch action starts
bindtouchmove	eventhandle	-	Finger touch and move
bindtouchend	eventhandle	-	Finger touch action ends
bindtouchcancel	eventhandle	-	Finger touch action is interrupted, such as incoming call reminder, pop-up window
bindlongtap	eventhandle	-	Trigger after finger long press 500ms, moving after triggering long press event will not trigger screen scrolling
binderror	eventhandle	-	When an error occurs, the error event is triggered, detail = {errMsg: 'something wrong'}

TIP

• The canvas tag has a default width of 300px and a height of 150px.
• The canvas-id in the same page cannot be repeated. If a canvas-id that has already appeared is used, the canvas corresponding to the canvas tag will be hidden and will no longer work properly.
• Avoid setting too large width and height, which will cause crash problems on Android.
• The old canvas interface uses the canvas-id attribute to uniquely identify the canvas; the new Canvas 2D can directly use the id identifier.
• The old canvas interface uses wx.createCanvasContext to synchronously obtain the CanvasContext. The new Canvas 2D interface needs to first asynchronously obtain the Canvas object through SelectorQuery, and then obtain the rendering context RenderingContext through Canvas.getContext.
• The canvas size of the old version of the canvas interface is determined by the actual rendering width and cannot be modified by developers. The new version of the Canvas 2D interface allows developers to freely modify the logical size of the canvas. The default width and height are 300*150. On different devices, physical pixels and logical pixels are not equal, so we generally need to use wx.getWindowInfo to obtain the pixel ratio of the device and multiply it by the actual size of the canvas.

• Sample code: (new API):

wxml:

<canvas type="2d" id="myCanvas"></canvas>

javascript:

Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)

        ctx.fillRect(0, 0, 100, 100)
      })
  }
})

• Sample code: (old API):

wxml:

<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- When using absolute positioning, the canvas at the back of the document flow is displayed at a higher level than the canvas at the front -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- Because the canvas-id is the same as the previous canvas, the canvas will not be displayed and an error event will be sent to AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>

javescript:

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // Uses wx.createContext to get the Canvas context
    var context = wx.createCanvasContext('firstCanvas')

    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  }
})