Canvas画画工具库

@ 0.0.4

基于Canavs封装画画简单的工具库

ES6 module风格

安装

npm i canvas-palette

使用

import {Palette} from 'canvas-palette'

var palette=new Palette({canavs:'canvasId'})

Palette构造函数（参数说明）

Palette(opts:Object)

Palette构造函数参数说明:(支持的参数配置)

• canvas 设置canavs元素的id

• onReady 当鼠标在画布上按下时的回调函数

• onMove 当鼠标在画布上移动时的回调函数

• onStop 当鼠标在画布上抬起时的回调函数

• onClear 当画布清空的时候、执行的回调函数

onReady,onMove,onStop三个回调函数、所以依次执行的,onMove不会单独执行、只有onReady之后才会执行！三个回调函数、传回以下信息：

• onReady location[位置信息]、type[画笔动作类型]、style[当前画笔样式]

• onMove location[位置信息]、type[画笔动作类型]、style[当前画笔样式]

• onStop type[画笔动作类型]

实例方法

palette.canvas()

返回canavs对象

palette.pen()

返回当前canvas上下文对象、也就是画笔对象

palette.style(opts:Object)

设置画笔样式

• 支持canvas上下文所有的属性

palette.show(type:String,location:Object,style:Object)

用于直接在画布上显示画笔动作路径

• type 画笔动作:move,line,stop

• lcaotion 画笔位置:x,y

• style 画笔样式：context所有样式属性

palette.showMode()

设置为显示模式、即当前画布不能操作

palette.drawMode()

设置为绘制模式、可以进行鼠标绘制操作

palette.clear()

清空画布