Skip to main content
Version: 3.x

Canvas

画布

<Canvas /> 组件的 RN 版本尚未实现。

参考文档

类型#

ComponentType<CanvasProps>

示例代码#

class App extends Components {
render () {
return (
{/*如果是支付宝小程序,则要加上id属性,值和canvasId一致*/}
<Canvas style='width: 300px; height: 200px;' canvasId='canvas' />
)
}
}

CanvasProps#

参数类型默认值必填说明
typestring指定 canvas 类型,支持 2d 和 webgl
canvasIdstringcanvas 组件的唯一标识符,若指定了 type 则无需再指定该属性
disableScrollbooleanfalse当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
onTouchStartBaseEventOrigFunction<any>手指触摸动作开始
onTouchMoveBaseEventOrigFunction<any>手指触摸后移动
onTouchEndBaseEventOrigFunction<any>手指触摸动作结束
onTouchCancelBaseEventOrigFunction<any>手指触摸动作被打断,如来电提醒,弹窗
onLongTapBaseEventOrigFunction<any>手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
onErrorBaseEventOrigFunction<onErrorEventDetail>当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}

H5 属性

属性名类型默认值说明
nativePropsObject{}H5 独有,用于透传 WebComponents 上的属性到内部 H5 标签上

API 支持度#

API微信小程序H5React Native
CanvasProps.type✔️
CanvasProps.canvasId✔️
CanvasProps.disableScroll✔️
CanvasProps.onTouchStart✔️
CanvasProps.onTouchMove✔️
CanvasProps.onTouchEnd✔️
CanvasProps.onTouchCancel✔️
CanvasProps.onLongTap✔️
CanvasProps.onError✔️

onErrorEventDetail#

参数类型
errMsgstring

API 支持度#

API微信小程序H5React Native
Canvas✔️