Canvas
Canvas.
Note: Not supported for use in RN at this time.
Type
ComponentType<CanvasProps>
Examples
- React
- Vue
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' />
)
}
}
<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 | ✔️ |