Permalink
Browse files

framerate monitor bugfixes. v.0.1.6

  • Loading branch information...
1 parent 2444f24 commit b92a1f1630c6c27435ef6b4e7037fe3042760b9c @Donkeyb Donkeyb committed Apr 5, 2012
Showing with 31 additions and 17 deletions.
  1. +2 −2 drawing/index.php
  2. +21 −3 images-and-text/index.php
  3. +1 −1 local/header.php
  4. +7 −11 src/JS3.js
View
4 drawing/index.php
@@ -63,10 +63,10 @@
<p>In addition to the base object properties defined above, Circles, Rectangles, & Triangles also define fill & stroke values.<br>To disable the fill or stroke of a Shape, set its <strong><u>fill</u></strong> or <strong><u>stroke</u></strong> property to false.</p>
<pre><code class='javascript'>
fill :Boolean = true;
- fillColor :Number = '#DDD';
+ fillColor :String = '#DDD';
fillAlpha :Number = 1;
stroke :Boolean = true;
- strokeColor :Number = '#CCC';
+ strokeColor :String = '#CCC';
strokeAlpha :Number = 1;
strokeWidth :Number = 4;
</code></pre><hr>
View
24 images-and-text/index.php
@@ -9,7 +9,8 @@
</div>
<h2>Displaying Images</h2>
- <p>To display an Image on the canvas, simply create a JS3Image Object and pass in the path of the file to be loaded.</p>
+ <p>To display an Image on the canvas, simply create a JS3Image Object and pass in the path of the file to be loaded.<br>
+ JS3Image Objects support <span style='color:blue'>pngs, jpgs, </span>and <span style='color:blue'>gifs.</span></p>
<pre><code class='javascript'>
var stage = new JS3('my-canvas');
var img = new JS3Image( {src:'nyancat.png'} );
@@ -27,7 +28,15 @@
stage.addChild(img);
</code></pre>
<canvas id="img-2" width='898' height='100'></canvas>
- <p><b>Supported Image file formats include <span style='color:blue'>png, jpg, </span>and <span style='color:blue'>gif.</span></b></p><hr>
+ <p>Each JS3Image Object also has a <u><b>ready</b></u> callback that executes when the Image has finished loading.</a>
+ <pre><code class='javascript'>
+ var stage = new JS3('my-canvas');
+ var img = new JS3Image( {x:25, y:25, src:'nyancat.png'} );
+ img.ready = function(){ alert('Image Loaded')};
+ stage.addChild(img);
+ </code></pre>
+ <p><strong>Quick Tip : </strong>You don't have to wait for the Image to finish loading before adding it to the DisplayList.</p><hr>
+
<h2>Rendering Text</h2>
<p>Rendering Text on the canvas is as simple as creating a JS3Text Object and adding it to the Stage.</p>
<pre><code class='javascript'>
@@ -40,7 +49,6 @@
<canvas id="img-3" width='898' height='100'></canvas>
<p>And of course you can scale and rotate JS3Objects just as you would any other Sprite.</p>
<pre><code class='javascript'>
- var stage = new JS3('my-canvas');
var text = new JS3Text( {text:'Hello World!', bold:true, color:'green', size:20} );
text.x = 50;
text.y = 35;
@@ -50,6 +58,16 @@
stage.addChild(text);
</code></pre>
<canvas id="img-4" width='898' height='100'></canvas>
+ <p>In addition to the properties inherited from the <a href=<?php linkto('/drawing/#drawing-basics')?>>base JS3Object</a>, JS3Text objects also define the following :</p>
+ <pre><code class='javascript'>
+ font :String = 'Arial';
+ size :Number = 12;
+ bold :Boolean = false;
+ italic :Boolean = false;
+ color :String = '#333';
+ strokeColor :String = '#CCC';
+ </code></pre>
+
<p>Support for rendering text on an HTML5 canvas is still somewhat in its infancy.<br>
Many more features will be added here as the spec and browser support evolves...</p><hr>
View
2 local/header.php
@@ -1,5 +1,5 @@
<?php
-$version='0.1.57'; $dl='https://raw.github.com/braitsch/js3/master/src/JS3-'.$version.'-min.js';
+$version='0.1.6'; $dl='https://raw.github.com/braitsch/js3/master/src/JS3-'.$version.'-min.js';
$root = $_SERVER["REMOTE_ADDR"] == '127.0.0.1' ? 'http://localhost:8888' : 'http://quietless.com/js3';
function linkto($n){ global $root; echo $root.$n;}
?>
View
18 src/JS3.js
@@ -1,7 +1,7 @@
/**
* JS3 - A Drawing & Tweening API for the JavaScript Canvas
- * Version : 0.1.57
+ * Version : 0.1.6
* Documentation : http://quietless.com/js3/
*
* Copyright 2012 Stephen Braitsch :: @braitsch
@@ -404,29 +404,25 @@ window.getAnimFrame = (function(){
})();
JS3.getFrameRate = function(){
var now = window.mozAnimationStartTime || Date.now();
- JS3.FR = 1000 / (now - JS3.FT); JS3.FT = now;
+ if (now - JS3.FT > 5){ JS3.FR = 1000 / (now - JS3.FT); JS3.FT = now;}
};
JS3.showFrameRate = function(x, y, stage){
if (document.getElementById('JS3FR')) return;
- var x1 = 0; y1 = 0;
- if (stage){
- x1 = stage.position.x;
- y1 = stage.position.y;
- }
- if (y) y1 += y;
- if (x) x1 += x;
+ var xx = 0; yy = 0;
+ if (stage){ xx = stage.position.x; yy = stage.position.y; }
+ if (x) xx += x; if (y) yy += y;
var d = document.createElement('div');
d.setAttribute('id', 'JS3FR');
d.style.position = "absolute";
- d.style.top = y1+'px'; d.style.left = x1+'px';
+ d.style.left = xx+'px'; d.style.top = yy+'px';
d.style.background = "#333"; d.style.border = "1px solid #555";
d.style.color = '#00ff00'; d.style.padding = '10px';
d.style.fontSize = '16px'; d.style.fontFamily = 'Arial,sans-serif';
d.style.textShadow='1px 1px 0 #000';
d.innerHTML = '60.0 fps';
document.body.appendChild(d);
setInterval(function(){
- var n = JS3.FR.toFixed(1);
+ var n = JS3.FR.toFixed(1);
d.innerHTML = n+' fps';
if (n<15){d.style.color = '#ff0000';}else if (n>=15 && n<=30){d.style.color = '#ffff00';} else{d.style.color = '#00ff00';}
}, 1000);

0 comments on commit b92a1f1

Please sign in to comment.