topical media & game development
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.