Skip to content

Canvas

wx.createCanvas

TIP

The API usage is as follows:wx.createCanvas()

  • Functional description: Create a canvas object. The first call creates a canvas displayed on the screen, and subsequent calls create off-screen canvases.
  • Return value: Canvas , Canvas object.

Canvas

Properties

  • number width:Canvas width.
  • number height:Canvas height.

Method

Canvas.getContext

TIP

The API usage is as follows:Canvas.getContext(string contextType, Object contextAttributes)

  • Functional description: Get the drawing context of the canvas object.

  • Parameters and descriptions:

    • string contextType, Context type, legal values ​​are as follows:

      Legal valueDescription
      2d2d drawing context
      webglwebgl drawing context
      webgl2webgl2 drawing context
      • Object contextAttributeswebgl context attribute, valid only when contextType is webgl.
      PropertiesTypeDefault valueRequiredDescription
      antialiasbooleanfalseNoIndicates whether anti-aliasing is used
      preserveDrawingBufferbooleanfalseNoIndicates whether the drawing buffer is retained after drawing is completed
      antialiasSamplesnumber2NoNumber of anti-aliasing samples. The minimum value is 2, and the maximum value does not exceed the system limit. Only iOS supports
  • Return value: RenderingContext Drawing context.

Canvas.toDataURL

TIP

The API usage is as follows:Canvas.toDataURL()

  • Functional description: Return the drawing content on the canvas in the format of a data URI.
  • Return value: string A string in data URI format.

RenderingContext

  • Functional description: The drawing context of the canvas object.

    • The CanvasRenderingContext2D object can be obtained through the Canvas.getContext('2d') interface, which implements most of the properties and methods defined by the HTML Canvas 2D Context.
    • The WebGLRenderingContext object can be obtained through the Canvas.getContext('webgl') interface, which implements all the properties, methods, and constants defined in WebGL 1.0.
    • The WebGL2RenderingContext object can be obtained through the Canvas.getContext('webgl2') interface, which implements all the properties, methods, and constants defined in WebGL 2.0.
  • 2D interface support

    2D attributes and interfaces not supported by iOS/Android

    • GlobalCompositeOperation does not support the following values: source-in source-out destination-atop lighter copy. If used, no error will be reported, but the result will not be consistent with the expectation.
    • isPointInPath
    • isPointInStroke
    • setLineDash
    • getLineDash
    • lineDashOffset
    • shadowColor
    • shadowBlur
    • shadowOffsetX
    • shadowOffsetY
  • WebGL interface support

    Compressed texture support

    • iOS supports pvr format
    • Android supports etc1 format