Added the latest examples

andrespagella · May 30, 2011 · bc89aae · bc89aae
1 parent 0b4ced0
commit bc89aae
Show file tree

Hide file tree

Showing 22 changed files with 971 additions and 214 deletions.
diff --git a/examples/ex1-lorem-ipsum.html b/examples/ex1-lorem-ipsum.html
@@ -4,44 +4,40 @@
 		<meta charset="UTF-8" />
 		<title>Canvas Example 1 (Lorem Ipsum)</title>
 
-		<script type="text/javascript" charset="utf-8">	
+		<script charset="utf-8">	
 
-			window.onload = function () 
-			{
+			window.onload = function () {
 				var canvas = document.getElementById('myCanvas');
 				var c = canvas.getContext('2d');
 
-				var loremIpsum = new Array();
-				loremIpsum.push ("Lorem ipsum dolor sit amet, ");
-				loremIpsum.push ("consectetur adipisicing elit, ");
-				loremIpsum.push ("sed do eiusmod tempor incididunt ");
-				loremIpsum.push ("ut labore et dolore magna aliqua.");
+				var loremIpsum = ["Lorem ipsum dolor sit amet, ",
+								  "consectetur adipisicing elit, ",
+								  "sed do eiusmod tempor incididunt ",
+								  "ut labore et dolore magna aliqua."];
 
 				c.font = '24px _sans';
-
-				draw (c, canvas, loremIpsum, 0);
-			}
-
-			function draw (c, canvas, phrase, pos)
-			{
-				pos = (pos == phrase.length) ? 0 : pos;
-
-				var textSize = c.measureText (phrase [pos]);
-				var xCoord = (canvas.width / 2) - (textSize.width / 2);
-
-				c.fillStyle = '#FFFFFF';
-				c.fillRect (0, 0, canvas.width, canvas.height);
-
-				c.fillStyle = '#000000';
-				c.fillText (phrase [pos], xCoord, 56);
-
-				pos++;
-
-				setTimeout(function () {
-					draw (c, canvas, phrase, pos);
-				}, 1000);
-			}
-
+
+				draw (loremIpsum, 0);
+
+				function draw (phrase, pos) {
+					pos = (pos == phrase.length) ? 0 : pos;
+
+					var textSize = c.measureText (phrase [pos]);
+					var xCoord = (canvas.width / 2) - (textSize.width / 2);
+
+					c.fillStyle = '#FFFFFF';
+					c.fillRect (0, 0, canvas.width, canvas.height);
+
+					c.fillStyle = '#000000';
+					c.fillText (phrase [pos], xCoord, 56);
+
+					pos++;
+
+					setTimeout(function () {
+						draw (phrase, pos);
+					}, 1000);
+				}
+			}			
 		</script>
 
     </head>

diff --git a/examples/ex10-grid-canvas-alt.html b/examples/ex10-grid-canvas-alt.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Example 10 Alt (Generating a 2500 x 2500 grid)</title>
+
+		<script charset="utf-8">	
+			window.onload = function () {
+				var tileMap = [];
+
+				var tile = {
+					width: 32,
+					height: 32
+				}
+
+				var grid = {
+					width: 2500,
+					height: 2500
+				}
+
+				var Keys = {
+			    	UP: 38,
+			    	DOWN: 40,
+			    	LEFT: 37,
+			    	RIGHT: 39
+			    }
+
+				var scroll = {
+					x: 0,
+					y: 0
+				}
+
+				var canvas = document.getElementById('myCanvas');
+				var c = canvas.getContext('2d');
+
+				window.addEventListener('keydown', handleKeyDown, false);
+
+				draw();
+
+				function handleKeyDown(e) {
+					switch (e.keyCode) {
+						case Keys.UP:
+							scroll.y -= ((scroll.y - tile.height) >= 0) ? tile.height : 0;
+							break;
+						case Keys.DOWN:
+							scroll.y += tile.height;
+							break;
+						case Keys.LEFT:
+							scroll.x -= ((scroll.x - tile.width) >= 0) ? tile.width : 0;
+							break;
+						case Keys.RIGHT:
+							scroll.x += tile.width;
+							break;
+					}
+
+					document.getElementById('scrollx').innerHTML = scroll.x;
+					document.getElementById('scrolly').innerHTML = scroll.y;
+				}
+
+				function draw() {
+					c.fillStyle = '#FFFFFF';
+					c.fillRect (0, 0, canvas.width, canvas.height);
+					c.fillStyle = '#000000';
+
+					var startRow = Math.floor(scroll.x / tile.width);
+					var startCol = Math.floor(scroll.y / tile.height);
+					var rowCount = startRow + Math.floor(canvas.width / tile.width) + 1;
+					var colCount = startCol + Math.floor(canvas.height / tile.height) + 1;
+
+					rowCount = ((startRow + rowCount) > grid.width) ? grid.width : rowCount;
+					colCount = ((startCol + colCount) > grid.height) ? grid.height : colCount;
+
+					for (var row = startRow; row < rowCount; row++) {
+						for (var col = startCol; col < colCount; col++) {
+							var tilePositionX = tile.width * row;
+							var tilePositionY = tile.height * col;
+
+							tilePositionX -= scroll.x;
+							tilePositionY -= scroll.y;
+
+							if ((row % 2) == 0 && (col % 2) == 0) {
+								c.strokeRect(tilePositionX, tilePositionY, tile.width, tile.height);
+							} else {
+								c.fillRect(tilePositionX, tilePositionY, tile.width, tile.height);
+							}
+
+						}
+					}
+
+					setTimeout(function() {
+						draw();
+					}, 1);
+				}
+			}
+		</script>
+    </head>
+    <body>
+		<canvas id="myCanvas" width="300" height="300"></canvas>
+		<br />
+		Use the UP, DOWN, LEFT and RIGHT keys to scroll
+		<br />
+		Scroll X: <span id="scrollx">0</span><br />
+		Scroll Y: <span id="scrolly">0</span>
+    </body>
+</html>
diff --git a/examples/ex10-grid-canvas.html b/examples/ex10-grid-canvas.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Example 10 (Generating a 2500 x 2500 grid)</title>
+
+		<script charset="utf-8">	
+			window.onload = function () {
+				var tileMap = [];
+
+				var tile = {
+					width: 32,
+					height: 32
+				}
+
+				var grid = {
+					width: 2500,
+					height: 2500
+				}
+
+				var Keys = {
+			    	UP: 38,
+			    	DOWN: 40,
+			    	LEFT: 37,
+			    	RIGHT: 39
+			    }
+
+				var scroll = {
+					x: 0,
+					y: 0
+				}
+
+				var canvas = document.getElementById('myCanvas');
+				var c = canvas.getContext('2d');
+
+				window.addEventListener('keydown', handleKeyDown, false);
+
+				initializeGrid();
+				draw();
+
+				function handleKeyDown(e) {
+					switch (e.keyCode) {
+						case Keys.UP:
+							scroll.y -= ((scroll.y - tile.height) >= 0) ? tile.height : 0;
+							break;
+						case Keys.DOWN:
+							scroll.y += tile.height;
+							break;
+						case Keys.LEFT:
+							scroll.x -= ((scroll.x - tile.width) >= 0) ? tile.width : 0;
+							break;
+						case Keys.RIGHT:
+							scroll.x += tile.width;
+							break;
+					}
+
+					document.getElementById('scrollx').innerHTML = scroll.x;
+					document.getElementById('scrolly').innerHTML = scroll.y;
+				}
+
+				function initializeGrid() {
+					for (var i = 0; i < grid.width; i++) {
+						tileMap[i] = [];
+						for (var j = 0; j < grid.height; j++) {
+							if ((i % 2) == 0 && (j % 2) == 0) {
+								tileMap[i][j] = 0;
+							} else {
+								tileMap[i][j] = 1;
+							}
+						}
+					}
+				}
+
+				function draw() {
+					c.fillStyle = '#FFFFFF';
+					c.fillRect (0, 0, canvas.width, canvas.height);
+					c.fillStyle = '#000000';
+
+					var startRow = Math.floor(scroll.x / tile.width);
+					var startCol = Math.floor(scroll.y / tile.height);
+					var rowCount = startRow + Math.floor(canvas.width / tile.width) + 1;
+					var colCount = startCol + Math.floor(canvas.height / tile.height) + 1;
+
+					for (var row = startRow; row < rowCount; row++) {
+						for (var col = startCol; col < colCount; col++) {
+							var tilePositionX = tile.width * row;
+							var tilePositionY = tile.height * col;
+
+							tilePositionX -= scroll.x;
+							tilePositionY -= scroll.y;
+
+							if (tileMap[row][col] == 0) {
+								c.strokeRect(tilePositionX, tilePositionY, tile.width, tile.height);
+							} else {
+								c.fillRect(tilePositionX, tilePositionY, tile.width, tile.height);
+							}
+
+						}
+					}
+
+					setTimeout(function() {
+						draw();
+					}, 1);
+				}
+			}
+		</script>
+    </head>
+    <body>
+		<canvas id="myCanvas" width="300" height="300"></canvas>
+		<br />
+		Use the UP, DOWN, LEFT and RIGHT keys to scroll
+		<br />
+		Scroll X: <span id="scrollx">0</span><br />
+		Scroll Y: <span id="scrolly">0</span>
+    </body>
+</html>