CodePen Embed - easeljs prepend, appendMatrix

<body>
  <!-- scale -->
  <div class="wrapper">
    <h2>scale(1.5, 0.5)</h2>
    <div class="box">
      <h3>prepend translate分も拡大縮小される</h3>
      <canvas id="canv-scale-pre" width="150" height="150">Canvas対応ブラウザを使って下さい。</canvas>
    </div>
    <div class="box">
      <h3>append</h3>
      <canvas id="canv-scale-ape" width="150" height="150">Canvas対応ブラウザを使って下さい。</canvas>
    </div>
   </div>
  
  <!-- translate -->
  <div class="wrapper">
    <h2>translate(10, 10)</h2>
    <div class="box">
      <h3>prepend</h3>
      <canvas id="canv-trans-pre" width="150" height="150">Canvas対応ブラウザを使って下さい。</canvas>
    </div>
    <div class="box">
      <h3>append</h3>
      <canvas id="canv-trans-ape" width="150" height="150">Canvas対応ブラウザを使って下さい。</canvas>
    </div>
   </div>
  
    <!-- rotate -->  
  <div class="wrapper">
    <h2>rotate(45)</h2>
    <div class="box">
      <h3>prepend(stage上の原点が基準になる)</h3>
      <canvas id="canv-rotate-pre" width="150" height="150">Canvas対応ブラウザを使って下さい。</canvas>
    </div>
    <div class="box">
      <h3>append</h3>
      <canvas id="canv-rotate-ape" width="150" height="150">Canvas対応ブラウザを使って下さい。</canvas>
    </div>
  </div>
      
   <!-- skew -->  
  <div class="wrapper">
    <h2>skew(30, 0)</h2>
    <div class="box">
      <h3>prepend(stage上の原点が基準になる)</h3>
      <canvas id="canv-skew-pre" width="150" height="150">Canvas対応ブラウザを使って下さい。</canvas>
    </div>
    <div class="box">
      <h3>append</h3>
      <canvas id="canv-skew-ape" width="150" height="150">Canvas対応ブラウザを使って下さい。</canvas>
    </div>
  </div>
      
  
  <script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
  <script src="https://code.createjs.com/preloadjs-0.6.1.min.js"></script>
  <script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
</body>

.wrapper {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.box{
  display: inline-block;
  text-align: center;
  width: 40%;
}

canvas {
  border: 1px solid #333;
}

.red{
  color: hsl(0, 80%, 70%);
}

.blue{
  color: hsl(240, 80%, 70%);
}

window.onload = function(){
  var rect_w = 50;
  var rect_h = 50;
  
  // scale
  {
    (function(){
    initialize('canv-scale-pre');
    
    function initialize(canvas_id) {
      var canvas = document.getElementById(canvas_id);
      var canvas_w = canvas.width;
      var canvas_h = canvas.height;
      var stage1 = new createjs.Stage(canvas);

      var g_rect = getGraphicsRect(1, '#333', 'hsl(0, 80%, 80%)', -rect_w/2, -rect_h/2, rect_w, rect_h);
      var rect = new createjs.Shape(g_rect);
      rect.x = canvas_w/2;
      rect.y = canvas_h/2;
      stage1.addChild(rect);

      var rect_trans = rect.clone();
      var g = rect.graphics.clone();
      g.beginFill('hsl(240, 80%, 80%)')
       .drawRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
      rect_trans.graphics = g;

      rect_trans.x = canvas_w/2; 
      rect_trans.y = canvas_h/2;
      
     var matrix = rect_trans.getMatrix();
      matrix
        .prependMatrix(new createjs.Matrix2D().scale(1.5, 0.5))
        .decompose(rect_trans);
      stage1.addChild(rect_trans);
      stage1.update(); 
     }
  })();
  
    (function(){
      initialize('canv-scale-ape');

      function initialize(canvas_id) {
        var canvas = document.getElementById(canvas_id);
        var canvas_w = canvas.width;
        var canvas_h = canvas.height;
        var stage1 = new createjs.Stage(canvas);

        var g_rect = getGraphicsRect(1, '#333', 'hsl(0, 80%, 80%)', -rect_w/2, -rect_h/2, rect_w, rect_h);
        var rect = new createjs.Shape(g_rect);
        rect.x = canvas_w/2;
        rect.y = canvas_h/2;
        stage1.addChild(rect);

        var rect_trans = rect.clone();
        var g = rect.graphics.clone();
        g.beginFill('hsl(240, 80%, 80%)')
         .drawRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
        rect_trans.graphics = g;

        rect_trans.x = canvas_w/2; 
        rect_trans.y = canvas_h/2;

       var matrix = rect_trans.getMatrix();
        matrix
          .scale(1.5, 0.5)
          .decompose(rect_trans);
        stage1.addChild(rect_trans);
        stage1.update(); 
       }
    })();
  }

  
  // translate
  {
    (function(){
    initialize('canv-trans-pre');
    
    function initialize(canvas_id) {
      var canvas = document.getElementById(canvas_id);
      var canvas_w = canvas.width;
      var canvas_h = canvas.height;
      var stage1 = new createjs.Stage(canvas);

      var g_rect = getGraphicsRect(1, '#333', 'hsl(0, 80%, 80%)', -rect_w/2, -rect_h/2, rect_w, rect_h);
      var rect = new createjs.Shape(g_rect);
      rect.x = canvas_w/2;
      rect.y = canvas_h/2;
      stage1.addChild(rect);

      var rect_trans = rect.clone();
      var g = rect.graphics.clone();
      g.beginFill('hsl(240, 80%, 80%)')
       .drawRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
      rect_trans.graphics = g;

      rect_trans.x = canvas_w/2; 
      rect_trans.y = canvas_h/2;
      
     var matrix = rect_trans.getMatrix();
      matrix
        .prependMatrix(new createjs.Matrix2D().translate(10, 10))
        .decompose(rect_trans);
      stage1.addChild(rect_trans);
      stage1.update(); 
     }
  })();
  
    (function(){
      initialize('canv-trans-ape');

      function initialize(canvas_id) {
        var canvas = document.getElementById(canvas_id);
        var canvas_w = canvas.width;
        var canvas_h = canvas.height;
        var stage1 = new createjs.Stage(canvas);

        var g_rect = getGraphicsRect(1, '#333', 'hsl(0, 80%, 80%)', -rect_w/2, -rect_h/2, rect_w, rect_h);
        var rect = new createjs.Shape(g_rect);
        rect.x = canvas_w/2;
        rect.y = canvas_h/2;
        stage1.addChild(rect);

        var rect_trans = rect.clone();
        var g = rect.graphics.clone();
        g.beginFill('hsl(240, 80%, 80%)')
         .drawRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
        rect_trans.graphics = g;

        rect_trans.x = canvas_w/2; 
        rect_trans.y = canvas_h/2;

       var matrix = rect_trans.getMatrix();
        matrix
          .translate(10, 10)
          .decompose(rect_trans);
        stage1.addChild(rect_trans);
        stage1.update(); 
       }
    })();
  }

  // rotate
  {
    (function(){
    initialize('canv-rotate-pre');
    
    function initialize(canvas_id) {
      var canvas = document.getElementById(canvas_id);
      var canvas_w = canvas.width;
      var canvas_h = canvas.height;
      var stage1 = new createjs.Stage(canvas);

      var g_rect = getGraphicsRect(1, '#333', 'hsl(0, 80%, 80%)', -rect_w/2, -rect_h/2, rect_w, rect_h);
      var rect = new createjs.Shape(g_rect);
      rect.x = canvas_w/2;
      rect.y = canvas_h/2;
      stage1.addChild(rect);

      var rect_trans = rect.clone();
      var g = rect.graphics.clone();
      g.beginFill('hsl(240, 80%, 80%)')
       .drawRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
      rect_trans.graphics = g;
      
      rect_trans.x = canvas_w/2; 
      rect_trans.y = canvas_h/2;
      
     var matrix = rect_trans.getMatrix();
      matrix
        .prependMatrix(new createjs.Matrix2D().rotate(45))
        .decompose(rect_trans);
      stage1.addChild(rect_trans);
      stage1.update(); 
     }
  })();
  
    (function(){
      initialize('canv-rotate-ape');

      function initialize(canvas_id) {
        var canvas = document.getElementById(canvas_id);
        var canvas_w = canvas.width;
        var canvas_h = canvas.height;
        var stage1 = new createjs.Stage(canvas);

        var g_rect = getGraphicsRect(1, '#333', 'hsl(0, 80%, 80%)', -rect_w/2, -rect_h/2, rect_w, rect_h);
        var rect = new createjs.Shape(g_rect);
        rect.x = canvas_w/2;
        rect.y = canvas_h/2;
        stage1.addChild(rect);

        var rect_trans = rect.clone();
        var g = rect.graphics.clone();
        g.beginFill('hsl(240, 80%, 80%)')
         .drawRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
        rect_trans.graphics = g;

        rect_trans.x = canvas_w/2; 
        rect_trans.y = canvas_h/2;

       var matrix = rect_trans.getMatrix();
        matrix
          .rotate(45)
          .decompose(rect_trans);
        stage1.addChild(rect_trans);
        stage1.update(); 
       }
    })();
  }
  
  // skew 
  {
    (function(){
    initialize('canv-skew-pre');
    
    function initialize(canvas_id) {
      var canvas = document.getElementById(canvas_id);
      var canvas_w = canvas.width;
      var canvas_h = canvas.height;
      var stage1 = new createjs.Stage(canvas);

      var g_rect = getGraphicsRect(1, '#333', 'hsl(0, 80%, 80%)', -rect_w/2, -rect_h/2, rect_w, rect_h);
      var rect = new createjs.Shape(g_rect);
      rect.x = canvas_w/2;
      rect.y = canvas_h/2;
      stage1.addChild(rect);

      var rect_trans = rect.clone();
      var g = rect.graphics.clone();
      g.beginFill('hsl(240, 80%, 80%)')
       .drawRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
      rect_trans.graphics = g;
      
      rect_trans.x = canvas_w/2; 
      rect_trans.y = canvas_h/2;
      
     var matrix = rect_trans.getMatrix();
      matrix
        .prependMatrix(new createjs.Matrix2D().skew(30, 0))
        .decompose(rect_trans);
      stage1.addChild(rect_trans);
      stage1.update(); 
     }
  })();
  
    (function(){
      initialize('canv-skew-ape');

      function initialize(canvas_id) {
        var canvas = document.getElementById(canvas_id);
        var canvas_w = canvas.width;
        var canvas_h = canvas.height;
        var stage1 = new createjs.Stage(canvas);

        var g_rect = getGraphicsRect(1, '#333', 'hsl(0, 80%, 80%)', -rect_w/2, -rect_h/2, rect_w, rect_h);
        var rect = new createjs.Shape(g_rect);
        rect.x = canvas_w/2;
        rect.y = canvas_h/2;
        stage1.addChild(rect);

        var rect_trans = rect.clone();
        var g = rect.graphics.clone();
        g.beginFill('hsl(240, 80%, 80%)')
         .drawRect(-rect_w/2, -rect_h/2, rect_w, rect_h);
        rect_trans.graphics = g;

        rect_trans.x = canvas_w/2; 
        rect_trans.y = canvas_h/2;

       var matrix = rect_trans.getMatrix();
        matrix
          .skew(30, 0)
          .decompose(rect_trans);
        stage1.addChild(rect_trans);
        stage1.update(); 
       }
    })();
  }
  
  function getGraphicsRect(strokeStyle=1, stroke_color='#333', fill_color, 
  x, y, width, height){
    var g_rect = new createjs.Graphics()
    .setStrokeStyle(strokeStyle)
    .beginStroke(stroke_color)
    .beginFill(fill_color)
    .drawRect(x, y, width, height);
    return g_rect;
   }
};

Run Pen

This Pen is owned by Cartman on CodePen.

See more by @Cartman0 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.