Canvas

Canvas.

Note: Not supported for use in RN at this time.

Reference

Type

ComponentType<CanvasProps>

Examples

React

class App extends Components {
  render () {
    return (
       {/*If it's alipay mini program, add the id attribute with the same value as the canvasId*/}
      <Canvas style='width: 300px; height: 200px;' canvasId='canvas' />
    )
  }
}

Vue

<template>
  <canvas style="width: 300px; height: 200px;" canvas-id="canvas" />
</template>

CanvasProps

Property	Type	Default	Required	Description
type	string		No	The type of the canvas. Only webGL is supported.
canvasId	string		No	The unique identifier of the canvas component. This property can be ignored if a type is specified.
disableScroll	boolean	false	No	Disables screen scrolling and swipe-down-to-refresh features when the a finger taps to move on the canvas and a gesture event is bound.
onTouchStart	BaseEventOrigFunction<any>		No	Finger touch starts
onTouchMove	BaseEventOrigFunction<any>		No	Finger moves after touch
onTouchEnd	BaseEventOrigFunction<any>		No	Finger touch ends
onTouchCancel	BaseEventOrigFunction<any>		No	Finger touch is interrupted by call reminder, pop-up window, etc.
onLongTap	BaseEventOrigFunction<any>		No	Triggered when a finger taps and holds on the screen for 500 ms. After this event is triggered, moving on the screen does not trigger screen scrolling.
onError	BaseEventOrigFunction<onErrorEventDetail>		No	Triggers the error event when an error occurs. detail = {errMsg: 'something wrong'}

Property Support

Property	WeChat Mini-Program	H5	React Native
CanvasProps.type	✔️
CanvasProps.canvasId	✔️
CanvasProps.disableScroll	✔️
CanvasProps.onTouchStart	✔️
CanvasProps.onTouchMove	✔️
CanvasProps.onTouchEnd	✔️
CanvasProps.onTouchCancel	✔️
CanvasProps.onLongTap	✔️
CanvasProps.onError	✔️

onErrorEventDetail

Property	Type
errMsg	string

API Support

Property	WeChat Mini-Program	H5	React Native
Canvas	✔️