## 如何使用？
```
npm install --save @vislite/canvas
```
安装后，准备好渲染位置
```html
```
然后直接使用：
```js
import Canvas from "@vislite/canvas"
let canvas = new Canvas({
el: document.getElementById("root"),
data: {
radius: 100
},
template: [{
name: "circle",
attr: {
type: "fill",
cx: 200,
cy: 200,
radius: _this => _this.data.radius
},
config: {
fillStyle: "red"
},
event: {
click(event) {
console.log("你点击了我")
}
},
children: []
}]
})
```
这样，一个红色的球就绘制出来了。
如果希望改变球的大小，可以直接：
```js
canvas.data.radius = 200
```
还可以看出来，点击球的时候会触发点击事件，如果想在点击的时候修改球大小，就可以：
```js
......
event: {
click(event) {
// console.log("你点击了我")
this.data.radius = 200
}
},
......
```
此外，其中config属性和vislite的[canvas画笔配置](https://oi-contrib.github.io/VISLite/#/api/canvas/api)一致。
下面是更多功能明细：
- [指令（for、if）](./docs/directive.md)
- [事件](./docs/event.md)
- [图形（arc 弧、circle 圆、rect 矩形、text 文字）](./docs/graph.md)
- [自定义图形](./docs/define-graph.md)
## 版权
MIT License
Copyright (c) [zxl20070701](https://zxl20070701.github.io/notebook/home.html) 走一步，再走一步