Createjs

Easeljs

• graphic类，shape类（需要搭配使用）

  //创建一个舞台，得到一个参考的画布
  var stage = new createjs.Stage("cvs");
  // 创建图形类
  var g = new createjs.Graphics();
  /*需要注意顺序，先进行设置后进行绘制*/
  // 设置border线宽
  g.setStrokeStyle(1);
  // 设置border线颜色
  g.beginStroke("#000000");
  // 填充颜色
  g.beginFill("red");
  // 画圆
  g.drawCircle(30,30,30);   
  // 创建形状类
  var s1 = new createjs.Shape(g);
  // 添加到画布
  stage.addChild(s1);
  stage.update();

• Container容器
  将绘制的元素可以放在container中进行统一管理，方便后续的动画操作
• sprite和spritesheet

  // 创建舞台
  var stage = new createjs.Stage('cvs');
  var data = {
    // 帧率
    framerate: 20,
    images: ["img/sprite.png"],
    frames: {
      // 每帧的高度、宽度
      height: 256,
      width: 256,
      // 总帧数
      count: 64,
      // 相对于原始偏移的位置
      regX: 0,
      regY: 0
    },
    "animations": {
      // 自定义动画名称[开始帧，结束帧，下一个动画，速度]
      walk: [40,47,'walk',0.4]
    }
  };
  // 创建spritesheet
  var spriteSheet = new createjs.SpriteSheet(data);
  // 创建精灵实例
  var girl = new createjs.Sprite(spriteSheet,'walk');
  // 添加到舞台
  stage.addChild(girl);
  // 使用RAF(requestAnimationFrame)
  createjs.Ticker.timeMode = createjs.Ticker.RAF;
  // 通过Ticker类更新舞台
  createjs.Ticker.addEventListener("tick", stage);

preloaderjs

• 加载图片

 // 创建舞台
  var stage = new createjs.Stage('cvs');

  // 使用preloader加载图片
  // 1. 创建加载队列
  var queue = new createjs.LoadQueue(true);
  // 2. 监听事件
  queue.on("fileload", handleFileLoad, this); // 单个文件已经加载完成
  //queue.on("complete", handleComplete, this);  // 所有的文件全部加载完成

  // 3. 添加文件 (loadFile单(多个用{})个文件 mainfest(清单列表)多个文件)
  queue.loadFile('img/sprite.png');

  // 处理文件加载完成
  function handleFileLoad(e) {
    var type = e.item.type;
    // 4. 得到图片
    if (type == createjs.LoadQueue.IMAGE) {
      var data = {
        // 帧率
        framerate: 20,
        images: [e.result],
        frames: {
          // 每帧的高度、宽度
          height: 256,
          width: 256,
          // 总帧数
          count: 64,
          // 相对于原始偏移的位置
          regX: 0,
          regY: 0
        },
        "animations": {
          // 自定义动画名称[开始帧，结束帧，下一个动画，速度]
          walk: [40, 47, 'walk', 0.4]
        }
      };
      // 创建spritesheet
      var spriteSheet = new createjs.SpriteSheet(data);
      // 创建精灵实例
      var girl = new createjs.Sprite(spriteSheet, 'walk');
      // 添加到舞台
      stage.addChild(girl);
      // 使用RAF(requestAnimationFrame)
      createjs.Ticker.timeMode = createjs.Ticker.RAF;
      // 通过Ticker类更新舞台
      createjs.Ticker.addEventListener("tick", stage);
    }
  }