Canvas - 《Taro 文档帮助手册教程》

title: Canvas

sidebar_label: Canvas

画布

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

参考文档

ComponentType<CanvasProps>

class App extends Components {
  render () {
    return (
      <Canvas style='width: 300px; height: 200px;' canvasId='canvas' />
    )
  }
}

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

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

参数	类型
errMsg	`string`

API	微信小程序	H5	React Native
Canvas	✔️