topical media & game development
mobile-graphic-easel-examples-GraphicsTest.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>EaselJS: Simple Graphics</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<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 -->
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script type="text/javascript">
var canvas;
var stage;
var img;
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
canvas = document.getElementById("testCanvas");
// create a new stage and point it at our canvas:
stage = new createjs.Stage(canvas);
// grab canvas width and height for later calculations:
w = canvas.width;
h = canvas.height;
img = new Image();
img.onload = layout;
img.src = "./mobile-graphic-easel-examples-assets-daisy.png";
}
function layout() {
var arr = [createStar, createHex, createLineTo, createRadialGradientFill, createEllipse, createRectGradientFill, createBitmapFill];
var padding = 5;
var _width = 155;
var _height = 155;
var cols = 4;
var space = 0;
var l = arr.length;
var border = createBorder();
for(var i=0;i<l;i++) {
var tile = arr[i]();
tile.x = 42+(_width + padding) *(i\%cols);
tile.y = 42+(i/cols | 0) * (_height+padding);
stage.addChild(tile);
}
stage.addChild(border);
stage.update();
}
function createBorder() {
var container = new createjs.Container();
var s = new createjs.Shape();
s.graphics.beginBitmapStroke(img).setStrokeStyle(32).drawRect(20,20,920,360);
container.addChild(s);
return container;
}
function createBitmapFill() {
var container = createTile();
var s = new createjs.Shape();
s.graphics.beginBitmapFill(img).setStrokeStyle(8).beginRadialGradientStroke(["#FFF","#000"],[0,1],0,0,0,0,30,130).drawRect(0, 0, 130, 130);
s.x = 12;
s.y = 10;
container.addChild(s);
return container;
}
function createRectGradientFill() {
var container = createTile();
var s = new createjs.Shape();
s.graphics.beginLinearGradientFill(["#FFF","#000"],[0,1],0,0,0,130).drawRect(0,0,130,130);
s.x = 12;
s.y = 10;
container.addChild(s);
return container;
}
function createEllipse() {
var container = createTile();
var s = new createjs.Shape();
s.graphics.f(createjs.Graphics.getRGB(0,0x66,0x99,0.5)).setStrokeStyle(4).beginLinearGradientStroke(["#F00","#000"],[0,1],0,0,70,140).drawEllipse(0,0,70,140,8);
s.x = 40;
s.y = 10;
container.addChild(s);
return container;
}
function createRadialGradientFill() {
var container = createTile();
var s = new createjs.Shape();
s.graphics.ss(8).beginStroke("#f0f").beginRadialGradientFill(["#FFF","#0FF"],[0,1],0,0,0,0,0,40).drawCircle(0,0,40);
s.x = s.y = 80;
container.addChild(s);
return container;
}
function createLineTo() {
var container = createTile();
var s = new createjs.Shape();
s.graphics.setStrokeStyle(16, "round", "round").beginStroke("#f90").moveTo(20,10).lineTo(90,90).lineTo(90,140);
container.addChild(s);
return container;
}
function createHex() {
var container = createTile();
var s = new createjs.Shape();
s.graphics.beginFill("#0F0").drawPolyStar(0,0,40,6).drawPolyStar(0,75,40,6);
s.x = 80
s.y = 40;
container.addChild(s);
return container;
}
function createStar() {
var container = createTile();
var s = new createjs.Shape();
s.graphics.setStrokeStyle(1).beginStroke(createjs.Graphics.getRGB(255, 255, 0)).beginFill("#FF0").endStroke().drawPolyStar(0,0,80,5,0.6,-90);
s.x = 80
s.y = 85;
container.addChild(s);
return container;
}
function createTile() {
var container = new createjs.Container();
var bg = new createjs.Shape();
bg.graphics.beginFill('#CCCCCC').drawRect(0, 0, 155, 155).endFill();
bg.alpha = 0.25;
container.addChild(bg);
return container;
}
</script>
</head>
<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Graphics Test</h1>
<p>This demo shows the usage of all of the <b>Graphics</b> APIs.</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.
