EaselJS初窥

基础使用：

canvas + stage

• 绘制几何图形

HTML部分

  easeljs简单使用

JS部分

window.onload=function(){
  //获取stage
  var canvas = document.getElementById("myCanvas");
  var stage = new createjs.Stage(canvas);

  function circle(){
    //生成圆形
    var circle = new createjs.Shape();
    circle.graphics.setStrokeStyle(2).beginStroke("rgba(0,0,0,.5)").beginFill("orange").drawCircle(0, 0, 50);
    circle.x = 55;
    circle.y = 100;
    
    //将生成图形添加到stage中，并且调用update方法更新
    stage.addChild(circle);
    stage.update();
  }
  
  function rect(){
    //生成矩形
    var rect = new createjs.Shape();
    rect.graphics.beginFill("orange").drawRect(10, 10, 100, 100);
    rect.x = 120;
    rect.y = 40;
    
    //将生成图形添加到stage中，并且调用update方法更新
    stage.addChild(rect);
    stage.update();
  }
  
  function polystar(){
    //生成多角形
    var polystar = new createjs.Shape();
    polystar.graphics.setStrokeStyle(5).beginStroke("orange").drawPolyStar(290,100,5,10,10,110);
    
    stage.addChild(polystar);  
    stage.update();
  }
  
  circle();
  rect();
  polystar();
}

效果图

上方代码中，多次用到：

stage.update();

可以通过添加一个Ticker类帮助避免多次调用update方法，添加以下代码，删除stage.update()即可;

createjs.Ticker.addEventListener("tick", handleTicker);
  function handleTicker(){
    stage.update();
  }

• 图形属性修改及事件绑定

function circle(){
    //生成圆形
    var circle = new createjs.Shape();
    circle.graphics.beginFill("orange").drawCircle(0, 0, 50);
    
    //以下方式可以方便的修改图形相关的属性
    
    //修改图形坐标
    circle.x = Math.floor(Math.random() * 200);
    circle.y = Math.floor(Math.random() * 350);
    
    //修改图形缩放
    circle.scaleX = Math.floor(Math.random() * 2)+1;
    circle.scaleY = Math.floor(Math.random() * 2)+1;
    
    //修改alpha和旋转
    circle.alpha = Math.random() * 1;
    circle.rotation = Math.floor(Math.random() * 60);
    
    //设置图形相关的鼠标事件
    circle.on("click",handleClick,null,false);            
    circle.on("mouseout",handleMouseOut,null,false);
    
    //将生成图形添加到stage中，并且调用update方法更新
    stage.addChild(circle);
    stage.update();
  }
  
  function handleClick(e){
      alert("已经点击了圆形");
  }
  
  function handleMouseOut(e){
      console.log("鼠标移出了圆形");
  }

• 生成文字

//绘制10个随机属性的文字
  function drawText(){
      for(var i=0;i<10;i++){
          var theText = new createjs.Text("极客标签","normal 32px microsoft yahei","#222222");
          theText.x = Math.floor(Math.random() * 350);
          theText.y = Math.floor(Math.random() * 400);
          theText.rotation = Math.floor(Math.random() * 360);
          theText.alpha = Math.random() * 1;
          theText.color = "#"+Math.floor(Math.random()*16777215).toString(16);
          stage.addChild(theText);
          stage.update();
      }
  }