第三方的canvas库

第三方的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对象