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

你可能感兴趣的:(第三方的canvas库)