#### canvas 画板

#### 兼容移动端 touch 事件

#### 演示地址http://115.28.106.143:8081/#/canvas 控制台打印了相关的信息

```
安装
npm install -s canvas-artboard
引入
import Draw from 'canvas-artboard'

<canvas width="800" height="500" id="canvas"></canvas>

const canvasDraw = new Draw("canvas", [], "#999999", this.color, this.size, (e) => {console.log('当前画布实例：', e)});
参数依次传入为
  canvas的id,
  历史纪录的点: historyOptions {
    [
      {
        size: Number,
        color: String,
        list: [
          [12,13],
          [14,15]
        ]
      },
      {
        img: HTMLImageElement,
        x: number,
        y: number,
        w: number,
        h: number,
        isCover: boolean
      }
    ]
  },
  画板背景色,
  画笔颜色,
  画笔大小,
  每次画笔完成的回调方式，回调参数为当前canvasDraw的实例
```

----------提供的方法-----------

### API

| 方法             | 说明                                                                                 | 参数                                                              | 默认值                 | 返回值         | 版本 |
| ---------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | ---------------------- | -------------- | ---- |
| resetCanvas      | 清空 canvas 的方法                                                                   | 无                                                                |                        |                |
| init             | 还原所有画笔的画布 不传参数为清空画板                                                | {[{size: Number,color: String,list: [[12,13],[14,15]]}]}          | []                     |                |
| after            | 后一步画布-----返回一个对象{code, msg},code=404 没有前一笔, code=200 成功            | 无                                                                |                        | {code, msg}    | ~~   |
| front            | 返回一个对象{code, msg},前一步画布-----code=404 没有前一笔, code=200 成功            | 无                                                                |                        | {code, msg}    | ~~   |
| getPointList     | 获取画笔记录                                                                         | 无                                                                |                        | historyOptions | ~~   |
| setColor         | 设置画笔颜色                                                                         | color 如('#333333')                                               |                        |                | ~~   |
| setPenSize       | 设置画笔的大小                                                                       | number                                                            |                        |                | ~~   |
| eraser           | 橡皮檫（使用背景色为画笔，不会清除像素点）                                           | 无                                                                |                        |                | ~~   |
| getbase64        | 获取 canvas 的 base64                                                                | (质量 0-1 越大越好, 图片类型)                                     | (1, 'image/png')       | string         | ~~   |
| drawImg          | 插入图片具体说明见下方说明                                                           | (图片源， 位置 x， 位置 y， 图片宽， 图片高， 是否被历史画笔覆盖) |                        | string         | ~~   |
| downland         | 下载图片                                                                             | (下载图片名, 质量 0-1 越大越好, 图片类型)                         | (必填, 1, 'image/png') |                | ~~   |
| getBase64ImgFile | 获取 canvas 的 file 文件类型                                                         | (质量 0-1 越大越好, 图片类型, 文件名)                             | (1, 'image/png', 必填) | File 类型文件  | ~~   |
| clearPixel       | 清除画布像素（透明色不同于橡皮檫，image/png 才有效果， image/jpeg 底会被填充为黑色） | boolean                                                           | boolean                |                | ~~   |
| setNoDraw        | 在某些特定的场景下例如需要拖动 canvas 画布的情况，兼容 canvas 拖拽事件               | boolean                                                           | boolean                |                | ~~   |

```
 ###说明
 关于图片质量只有在指定图片格式为 image/jpeg 或 image/webp生效

 插入图片drawImg 使用input框选择图片转化成base64配合 async 和 await
 let reader = new FileReader();
 reader.onload = async (e) => {
   let img = await new Image()
   img.src = await e.target.result
   img.height = 100
   img.width = 100
   canvasDraw.drawImg(img, 0, 0, 100, 100, true)
 };
 reader.readAsDataURL(e.target.files[0]);

 #2020-06-08
 修改
 优化插入画板后前一笔后一笔的动作

 新增
 插入图片功能

 #2020-06-12
 修改
 源码部分注释
 优化插入画板后前一笔后一笔的动作
 获取base64图片方法的传参类型调整

 新增
 下载图片功能
 获取canvas的file文件类型

 #2022-03-26
 新增清除像素点功能
 通过canvasDraw.clearPixel(boolean)传入布尔值来开启关闭

 #2022-03-27
 优化清除像素点功能中鼠标移动过快产生的间隔

 #2022-04-02
 转换ts版本

 #2022-05-22
 1.新增每笔画完的回调方法
 2.新增设置canvas不可绘制(用于兼容拖拽事件)

  #2022-05-24
 1.修复在背景图为透明的情况下resetCanvas和init方法无法充值透明背景的情况

```