topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

mobile-graphic-easel-examples-Graphics-simple.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <title>EaselJS: Simple Graphics Example</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-Shape.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script type="text/javascript">
          var canvas;
          var stage;
          function init() {
              canvas = document.getElementById('myCanvas');
              width = canvas.width;
              height = canvas.height;
              stage = new createjs.Stage(canvas);
  
              var s = drawSmiley();
                  s.x = (960-350)/2;
                  s.y = 20;
              stage.addChild(s);
              stage.update();
  
          }
  
          function drawSmiley() {
              var s = new createjs.Shape();
              var g = s.graphics;
  
              //Head
              g.setStrokeStyle(15, 'round', 'round');
              g.beginStroke("#000");
              g.beginFill("#F00");
              g.drawCircle(170, 170, 170); //55,53
              g.endFill();
              g.setStrokeStyle(1, 'round', 'round');
  
              //Right eye
              g.setStrokeStyle(5, 'round', 'round');
              g.beginStroke("#000");
              g.beginFill("#000");
              g.drawRoundRect(125, 64, 20, 50, 10);
              g.endFill();
  
              //Left eye
              g.setStrokeStyle(5, 'round', 'round');
              g.beginStroke("#000");
              g.beginFill("#000");
              g.drawRoundRect(200, 64, 20, 50, 10);
              g.endFill();
  
              //Mouth
              g.setStrokeStyle(15, 'round', 'round');
              g.beginStroke("#000");
              g.moveTo(45, 155);
              g.bezierCurveTo(83, 307, 254, 317, 296, 152);
              return s;
          }
  
          </script>
  
  </head>
  <body onload="init()">
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Simple Graphics Example</h1>
              <p>This example draws a set of vector shapes as a smiley face.</p>
          </header>
  
          <canvas id="myCanvas" width="960" height="400"></canvas>
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.