Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 130 lines (103 sloc) 4.843 kB
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
1 <!DOCTYPE html>
2 <html>
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
3 <head>
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>EaselJS Example: Using cache and snapToPixel</title>
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
6
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
7 <link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
8
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
9 <script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
10 <script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
11 <script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
12 <script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
13 <script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
14 <script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
15 <script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
16 <script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
17 <script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
18 <script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
19
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
20 <!-- We also provide hosted minified versions of all CreateJS libraries.
21 http://code.createjs.com -->
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
22
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
23 <script>
24 var canvas;
25 var stage;
26 var shape;
27 var circleRadius=20;
9c03853 @lannymcnie Updated demos to latest versions.
lannymcnie authored
28
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
29 function init() {
30 if (window.top != window) {
31 document.getElementById("header").style.display = "none";
32 }
33
34 // create a new stage and point it at our canvas:
35 canvas = document.getElementById("testCanvas");
9b3d4bd @gskinner Moved all classes into a configurable "createjs" namespace. NOTE: THI…
gskinner authored
36 stage = new createjs.Stage(canvas);
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
37
38 // create a large number of slightly complex vector shapes, and give them random positions and velocities:
39
40 var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
41
42 for (var i=0; i<1000; i++) {
9b3d4bd @gskinner Moved all classes into a configurable "createjs" namespace. NOTE: THI…
gskinner authored
43 shape = new createjs.Shape();
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
44 shape.graphics.beginFill(colors[Math.random()*colors.length |0]).drawCircle(0,0,circleRadius);
45 shape.graphics.beginFill(colors[Math.random()*colors.length |0]).drawCircle(0,0,circleRadius*0.8);
46 shape.graphics.beginFill(colors[Math.random()*colors.length |0]).drawCircle(0,0,circleRadius*0.6);
47 shape.graphics.beginFill(colors[Math.random()*colors.length |0]).drawCircle(0,0,circleRadius*0.4);
48 shape.graphics.beginFill(colors[Math.random()*colors.length |0]).drawCircle(0,0,circleRadius*0.2);
49 shape.x = Math.random()*canvas.width;
50 shape.y = Math.random()*canvas.height;
51 shape.velX = Math.random()*10-5;
52 shape.velY = Math.random()*10-5;
53
54 // turn snapToPixel on for all shapes - it's set to false by default on Shape.
55 // it won't do anything until stage.snapToPixelEnabled is set to true.
56 shape.snapToPixel = true;
57
58 stage.addChild(shape);
59 }
60
61 // add a text object to output the current FPS:
9b3d4bd @gskinner Moved all classes into a configurable "createjs" namespace. NOTE: THI…
gskinner authored
62 fpsLabel = new createjs.Text("-- fps","bold 18px Arial","#FFF");
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
63 stage.addChild(fpsLabel);
64 fpsLabel.x = 10;
65 fpsLabel.y = 20;
66
67 // start the tick and point it at the window so we can do some work before updating the stage:
9b3d4bd @gskinner Moved all classes into a configurable "createjs" namespace. NOTE: THI…
gskinner authored
68 createjs.Ticker.addListener(window);
69 createjs.Ticker.setFPS(50);
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
70 }
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
71
72 function tick() {
73
74 var w = canvas.width;
75 var h = canvas.height;
76 var l = stage.getNumChildren()-1;
77
78 // iterate through all the children and move them according to their velocity:
79 for (var i=1; i<l; i++) {
80 var shape = stage.getChildAt(i);
81 shape.x = (shape.x+shape.velX+w)%w;
82 shape.y = (shape.y+shape.velY+h)%h;
83 }
84
9b3d4bd @gskinner Moved all classes into a configurable "createjs" namespace. NOTE: THI…
gskinner authored
85 fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS())+" fps";
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
86
87 // draw the updates to stage:
88 stage.update();
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
89 }
90
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
91 function toggleCache(value) {
92 // iterate all the children except the fpsLabel, and set up the cache:
93 var l = stage.getNumChildren()-1;
94
95 for (var i=0; i<l; i++) {
96 var shape = stage.getChildAt(i);
97 if (value) {
98 shape.cache(-circleRadius, -circleRadius, circleRadius*2, circleRadius*2);
99 } else {
100 shape.uncache();
101 }
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
102 }
103 }
104
105
d879044 @lannymcnie Updated demos to use relative paths for EaselJS libs
lannymcnie authored
106 </script>
a8846b0 @lannymcnie Updated EaselJS Demos for tag candidate.
lannymcnie authored
107
108 <style>
109 .controls {
110 padding: 10px;
111 }
112 </style>
113 </head>
114
115 <body onload="init();">
116
117 <header id="header" class="EaselJS">
118 <h1><span class="text-product">Easel<strong>JS</strong></span> Cache as Bitmap Example</h1>
119 <p>This example demonstrates the effect of <strong>DisplayObject.cache()</strong> and <strong>snapToPixel</strong> on performance. Caching speeds things up because the complex vector shapes do not have to be rerendered each tick. The results for snapToPixel vary between browsers, but in general it will have no effect on the uncached shapes, but a significant effect when cached.</p>
120 </header>
121
122 <!-- background isn't set to black to demonstrate how the darkening applies -->
123 <div class="controls">
124 <input type="checkbox" onClick="toggleCache(this.checked);"/> cache enabled
125 <input type="checkbox" onClick="stage.snapToPixelEnabled = !!this.checked;"/> snapToPixel enabled
126 </div>
127 <canvas id="testCanvas" width="960" height="350"></canvas>
128 </body>
129 </html>
Something went wrong with that request. Please try again.