title: Canvas

sidebar_label: Canvas

Canvas.

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

Reference

Type

  1. ComponentType<CanvasProps>

Examples

import Tabs from ‘@theme/Tabs’ import TabItem from ‘@theme/TabItem’

tsx 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' /> ) } } html <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 ✔️