Skip to main content
Version: 3.x

Canvas

Canvas.

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

Reference

Type

ComponentType<CanvasProps>

Examples

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' />
)
}
}

CanvasProps

PropertyTypeDefaultRequiredDescription
typestringNoThe type of the canvas. Only webGL is supported.
canvasIdstringNoThe unique identifier of the canvas component. This property can be ignored if a type is specified.
disableScrollbooleanfalseNoDisables screen scrolling and swipe-down-to-refresh features when the a finger taps to move on the canvas and a gesture event is bound.
onTouchStartBaseEventOrigFunction<any>NoFinger touch starts
onTouchMoveBaseEventOrigFunction<any>NoFinger moves after touch
onTouchEndBaseEventOrigFunction<any>NoFinger touch ends
onTouchCancelBaseEventOrigFunction<any>NoFinger touch is interrupted by call reminder, pop-up window, etc.
onLongTapBaseEventOrigFunction<any>NoTriggered 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.
onErrorBaseEventOrigFunction<onErrorEventDetail>NoTriggers the error event when an error occurs. detail = {errMsg: 'something wrong'}

Property Support

PropertyWeChat Mini-ProgramH5React Native
CanvasProps.type✔️
CanvasProps.canvasId✔️
CanvasProps.disableScroll✔️
CanvasProps.onTouchStart✔️
CanvasProps.onTouchMove✔️
CanvasProps.onTouchEnd✔️
CanvasProps.onTouchCancel✔️
CanvasProps.onLongTap✔️
CanvasProps.onError✔️

onErrorEventDetail

PropertyType
errMsgstring

API Support

PropertyWeChat Mini-ProgramH5React Native
Canvas✔️