canvas库的使用

第三方的canvas库

• konvaJS https://konvajs.github.io/ 通用
• echart http://echarts.baidu.com/ 图表
• 白鹭时代 https://www.egret.com/ 游戏
• treeJS https://threejs.org/ 3d库

面向对象方式

• 一切皆对象
• 如何定义对象 ①Object构造函数 ②直接量 {} ③自定义构造函数 再new
  ** 构造函数 new一个构造函数就可以得到对象（实例）*
• this
• 原型 prototype / 原型链

konva概念

• 舞台 stage，整个视图看做是一个舞台 stage，舞台中可以绘制很多个层 layer
• 层 layer，layer下面可以有很多的group
• 组 group,group下面可以有 矩形、图片、其他形状等
• 图形

基本操作

• 创建舞台

new Konva.Stage({
      container:'container'  //存放舞台的容器
      width:window.innerWidth  //设置全屏
      height:
  })

• 创建层
  new Konval.Layer({}) //创建一个层
  stage.add(layer) //将层添加到舞台
• 图形或组添加到 层
• 图形添加到组
• 绘制 layer.draw()

基本图形

• Konva.Rect() 矩形
• Konva.Circle() 圆形
• Konva.Ellipse() 椭圆
• Konva.Text() 文字
• Konva.Image() 图片
• Konva.Line() 划线
• Konva.star() 星星
• ....

事件

类似于jquery
rect.on("mouseenter", function(){ this.rotation(45); layer.draw(); }).on("mouseleave", function(){ this.rotation(0); layer.draw(); })

动画

• tween对象 指定动画持续时间 指定变化的样式 tween.play()

  • tween可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等
  • tween.play() //播放动画
  • tween.pause() //暂停动画
  • otween.reset() //重置动画
  • otween.finish() //立即结束动画

• 简写 图形.to()是对tween的封装

• Animation对象
  var anim=new Konva.Animation(function(frame){
  //动画系统提供的frame有三个属性可以使用：
  var time=frame.time //动画执行总时间
  var timeDiff=frame.timeDiff //距离上一帧的时间
  var frameRate=frame.frameRate //帧率（即1000/时间间隔）
  //动画的动作

  }，layer)
  anim.stop()//结束动画