第三方的canvas库
- konvaJS https://konvajs.github.io/ 通用
- echart http://echarts.baidu.com/ 图表
- 白鹭时代 https://www.egret.com/ 游戏
- treeJS https://threejs.org/ 3d库
Konva
Konva特点
面向对象方式
- 一切皆对象
- 如何定义对象 ①Object构造函数 ②直接量 {} ③自定义构造函数 再new
- 构造函数 new一个构造函数就可以得到对象（实例）
- this
- 原型 prototype / 原型链
konva概念
- 舞台 stage
- 层 layer
- 组 group
- 图形/
基本操作
-
创建舞台
new Konva.Stage({ width： height：})
创建层
new Konval.Layer({})
stage.add(layer)图形或组添加到 层
图形添加到组
绘制 layer.draw()
基本图形
- Konva.Rect() 矩形
- Konva.Circle() 圆形
- Konva.Ellipse() 椭圆
- Konva.Text() 文字
- Konva.Image() 图片
- Konva.Line() 划线
- Konva.star() 星星
- ....
事件
类似于jquery
动画
- tween对象 指定动画持续时间 指定变化的样式 tween.play()
- 简写 图形.to()
- Animation对象
