# bi.canvas

## canvas绘图,基类[BI.Widget](/core/widget.md)

{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)

{% common %}
```javascript

var canvas = BI.createWidget({
   type: "bi.complex_canvas",
        width: 500,
        height: 600
    });
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, {
     offset: 20,
     strokeStyle: "red",
     lineWidth: 2
 });

 canvas.branch(220, 155, 120, 110, 150, 200, {
     offset: 40
 });

 canvas.stroke();

 BI.createWidget({
     type: "bi.absolute",
     element: this,
     items: [{
         el: canvas,
         left: 100,
         top: 50
     }]
 })


```

{% endmethod %}


## 对外方法
| 名称     | 说明                           |  回调参数     
| :------ |:-------------                  | :-----   
| add | 添加对象到json数组 | json |
| path | 绘制路径 | pathString |
| image | 绘制图片 | (src,x,y,w,h)分别表示图片路径，绘制的原点横、纵坐标，宽、高 |
| rect |  绘制矩形 |  (x,y,w,h,r)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及矩形的圆角border-radius大小|
| circle |  绘制圆形 | (x,y,r)分别表示原点的横坐标，纵坐标，以及半径 |
| ellipse | 绘制椭圆 |(x,y,rx,ry)分别表示原点的横、纵坐标，以及水平半径和垂直半径|
| text | 绘制文本 | (x,y,text)分别表示绘制的原点横、纵坐标以及要绘制的文本内容|
| print | 根据制定参数打印出路径 | (x, y, string, font, size, origin, letter_spacing, line_spacing) |
| setStart | 开始绘制 |  |
| setFinish | 结束绘制 |  |
| setSize | 设置画布尺寸 | (width,height)分别表示画布宽高|
| setViewBox |  设置画布可视区域 |  (x,y,width,height,fit)分别表示可视区域原点坐标以及可视区域宽高，以及是否根据可视区域进行调整 |
| getById |  根据id返回元素 | id |
| getElementByPoint | 获根据给定的点坐标返回元素 | (x,y)|
| getElementsByPoint | 获根据给定的点坐标返回元素 | (x,y) |
| getFont | 通过给定的参数在已注册的字体中找到字体对象 | (family, weight, style, stretch) |
| set | 绘制形状的集合 |  |
| remove | 设置总页数 | pages |
| clear | 判断是否有上一页 |  v |


 | line | 绘制线段| (x0, y0, x1, y1) |
 | rect |  绘制矩形 |  (x,y,w,h,color)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及绘制的颜色|
 | circle |  绘制圆形 | (x, y, radius, color)分别表示原点的横坐标，纵坐标，半径以及颜色 |
| hollow | 填充中空的路径 |  |
| solid | 填充实心的路径 |  |
| gradient | 绘制渐变色 | (x0, y0, x1, y1, start, end) |
| reset | 重置画布 | —|
| stroke | 绘制 | callback |

---