topical media & game development

talk show tell print

mobile-graphic-easel-examples-HelloWorld.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>EaselJS Example: Text</title>
  
          <link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
  
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Text.js"></script>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script>
          function init() {
                  // get a reference to the canvas we'll be working with:
                  var canvas = document.getElementById("testCanvas");
  
                  // create a stage object to work with the canvas. This is the top level node in the display list:
                  var stage = new createjs.Stage(canvas);
  
                  // Create a new Text object:
                  var text = new createjs.Text("Hello World!", "36px Arial", "#777");
  
                  // add the text as a child of the stage. This means it will be drawn any time the stage is updated
                  // and that it's transformations will be relative to the stage coordinates:
                  stage.addChild(text);
  
                  // position the text on screen, relative to the stage coordinates:
                  text.x = 360;
                  text.y = 200;
  
                  // call update on the stage to make it render the current display list to the canvas:
                  stage.update();
          }
          </script>
  </head>
          
  <body onload="init();">
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Hello World!</h1>
              <p>Hello World example using <strong>Text</strong> and <strong>Stage</strong>.</p>
          </header>
  
          <div class="canvasHolder">
                  <canvas id="testCanvas" width="960" height="400"></canvas>
          </div>
  </body>
  </html>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.