### 开始使用
#### 使用OkayPainter
OkayPainter码云地址：https://gitee.com/djxfire/OkayPainter.git ，也可以使用 `npm install okaypainter`下载。
在 dist 目录下找到`okay-painter.min.js`
#### 引入OkayPainter
在使用 引入OkayPainter 前，需要在 HTML 中加载对应 JavaScript 文件：
~~~
<script type = "javascript" src = "okay-painter.min.js"></script>
~~~
#### 创建画布
在使用OkayPainter时，我们必须新建一个Canvas对象，并且需要一个DOM容器:
~~~
<div id = "canvas" style = "width:500px;height:600px;"></div>
~~~
~~~
let canvas = new okay.Canvas({
ele: 'canvas'
})
~~~
Canvas类只接受ID属性作为参数。至此我们已经在ID为canvas的DIV里创建了canvas节点，输出结果为：
~~~
<div id = "canvas" style = "width:500px;height:600px;">
<canvas width = "500" height="600" tabindex="0" style = "outline:none;">
</div>
~~~
#### 在画布中添加元素
OkayPainter提供多种基本图形。我们可以直接通过canvas的addChild添加元素，以下添加了一个圆：
~~~
let canvas = new okay.Canvas({
ele: 'canvas'
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,0,0,255))
canvas.addChild(circle)
canvas.paint()
~~~
创建了一个圆心在（300,300）位置，半径为100，颜色为红色的圆。
#### 为元素添加事件
我们可以直接通过元素的`Node.addEventListener`方法为元素添加事件，以下为元素添加点击事件：
~~~
let canvas = new okay.Canvas({
ele: 'canvas'
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,0,0,255))
canvas.addChild(circle)
circle.addEventListener(okay.Event.Type.EVENT_MOUSE_DOWN, (event, obj) => {
alert('点击了圆')
})
canvas.paint()
~~~
当用户点击圆时将执行alert
#### 为元素添加动画
我们可以直接通过元素的`Node.runAction`运行动画效果，以下为元素添加平移动画：
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,0,0,255))
canvas.addChild(circle)
circle.addEventListener(okay.Event.Type.EVENT_MOUSE_DOWN, (event, obj) => {
let mvAction = new okay.ActionMove(new okay.Point(100, 100),3)
circle.runAction(mvAction)
})
canvas.paint()
~~~
上述例子点击圆时圆将在3秒内移动到点（100,100）处。
