---
name: Canvas
title: 画布
category: 画布
owner: 赵龙飞
---

## 示例
```atom 基础示例
<template>
    <canvas class="myCanvas"
        canvas-id="testCanvas"
        :disable-scroll="true"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        @touchcancel="onTouchCancel"
        @longtap="onTouchLongtap"
        @error="onError"
    >
    </canvas>
</template>

<script type="config">
    {
        components: {
            canvas: 'components/Canvas/Canvas'
        }
    }
</script>

<script>
    export default {
        methods: {
            onTouchStart(e) {
                console.log('onTouchStart', e);
            },
            onTouchMove(e) {
                console.log('onTouchMove', e);
            },
            onTouchCancel(e) {
                console.log('onTouchCancel', e);
            },
            onTouchLongtap(e) {
                console.log('onTouchLongtap', e);
            },
            onError(e) {
                console.log('onError', e);
            }
        }
    }
</script>

<style scoped>
    .myCanvas {
        width: 100%;
        height: 100%;
    }
</style>
```
## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
canvasId | string | - | 可选 | canvas&nbsp;组件的唯一标识符 | -
disableScroll | boolean | false | 可选 | 当在&nbsp;canvas&nbsp;中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 | -