Tutorial Canvas Animation: introducing the EaselJS library

Je browser ondersteunt geen Canvas. Update je browser naar de laatste versie.

Example1. Introduction to EaselJS (Part of the CreateJS suite)

HTML

 <!doctype html>
  <html>
  <head>
      <base href="http://www.html5code.nl"/>
      <title>Introduction to EaselJS (Part of the CreateJS suite)</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="easeljs-0.7.1.min.js"></script>
      </head>
  <body> 
  	<canvas id="createjs1" style="border: 1px solid;"  ></canvas>
  </body>
  </html>

Javascript


          jQuery(document).ready(function() {
          	introCreatejs();
          });
 
  var stage;
var canvasWidth;
var canvasHeight;

function introCreatejs() {
    var canvas=jQuery("#createjs1");
    var context = canvas.get(0).getContext("2d");
    
    //Make the Canvas element  responsive for desktop, tablet en smartphone
    var parentWidth=jQuery(canvas).parent().width();
    canvasWidth = context.canvas.width  = parentWidth;
    canvasHeight = context.canvas.height  = 450;
    
    stage = new createjs.Stage(document.getElementById('createjs1'));
    
    //RECTANGLE
    var rectangle = new createjs.Shape();
    rectangle.graphics.beginStroke('#000');
    rectangle.graphics.beginFill('#f16529');
    rectangle.graphics.drawRect(0, 0, 150, 100);
    rectangle.x = canvasWidth/6
    rectangle.y = canvasHeight/9;
    stage.addChild(rectangle);
    
    
    //CIRCLE
    var circle = new createjs.Shape();
    circle.graphics.setStrokeStyle(20,"square").beginStroke('#000');
    circle.graphics.beginFill('#f16529');
    circle.graphics.drawCircle(0, 0, 50);
    circle.x = canvasWidth/2
    circle.y = canvasHeight/4;
    stage.addChild(circle);
    
    //STAR
    var poly = new createjs.Shape();
    poly.graphics.setStrokeStyle(4,"square").beginStroke('#000');
    poly.graphics.beginFill('#f16529');
    poly.graphics.drawPolyStar(0, 0, 60, 6, 0.6);
    poly.x = canvasWidth * 2/3
    poly.y = canvasHeight/4;
    stage.addChild(poly);
    
    //TRIANGLE
    var tri = new createjs.Shape();
    tri.graphics.beginStroke('#000');
    tri.graphics.beginFill('#f16529');
    tri.graphics.moveTo(50, 0)
    .lineTo(0, 100)
    .lineTo(100, 100)
    .lineTo(50, 0);
    tri.x = canvasWidth/6
    tri.y =  canvasHeight * 4/9;
    stage.addChild(tri);
    
    //ROUNDED RECTANGLE
    var roundedRectangle = new createjs.Shape();
    roundedRectangle.graphics.setStrokeStyle(7,"square").beginStroke('#000');
    roundedRectangle.graphics.beginFill('#f16529');
    roundedRectangle.graphics.drawRoundRect(0,0,200,70,10);
    roundedRectangle.x = canvasWidth/3
    roundedRectangle.y = canvasHeight * 4/9;
    stage.addChild(roundedRectangle);
    
    //ELLIPS drawEllipse(x,y,w,h) 
    var ellips = new createjs.Shape();
    ellips.graphics.setStrokeStyle(2,"butt").beginStroke('#000');
    ellips.graphics.beginFill('#f16529');
    ellips.graphics.drawEllipse(0,0,100,60) 
    ellips.x = canvasWidth *2/3
    ellips.y  =  canvasHeight * 4	/9;
    stage.addChild(ellips);
    
    //LINE
    var line= new createjs.Shape();
    line.graphics.setStrokeStyle(7,"butt").beginStroke('#000');
    line.graphics.moveTo(100, 0)
    .lineTo(0, 70)
    line.x = canvasWidth/6
    line.y =  canvasHeight * 7/9;
    stage.addChild(line);
    
    //ARC
    var arc = new createjs.Shape();
    arc.graphics.beginStroke('#000');
    arc.graphics.beginFill('#f16529');
    arc.graphics.arc(100, 100, 60, 0, Math.PI); 
    arc.x = canvasWidth/3
    arc.y  =  canvasHeight * 5/9;
    stage.addChild(arc);
    
    
    //ARC2 met linear gradient
    var arc2 = new createjs.Shape();
    arc2.graphics.setStrokeStyle(10,"butt").beginStroke('#000');
    
    arc2.graphics.beginLinearGradientFill( ["#FFEEEE","#f16529"],   [0, 1],    20, 0	, 20, 120); 
    arc2.graphics.arc(100, 100, 60, Math.PI, 0); 
    arc2.x = canvasWidth/2
    arc2.y  =  canvasHeight * 25	/36;
    stage.addChild(arc2);
    
    stage.update();
}

  

Next tutorial

Leave a comment