jeremyckahn · April 29, 2011 14:30
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>kapi</title>
 	<meta name="generator" content="TextMate http://macromates.com/">
 	<meta name="author" content="Jeremy Kahn">
 	<!-- Date: 2010-12-07 -->
 	
 	<script src="../js/kapi.js"></script>
 	<script src="../js/jquery.js"></script>
 	<script src="../js/shapes.js"></script>
 	
 	<style type="text/css">
 		canvas{
 			float: left;
 		}
 	
 		ul{
 			float: left;
 		}
 	</style>
 </head>
 <body>

 	<canvas id="myCanvas">Plz stop using IE.</canvas>
 	
 	<ul>
 		<li id="currentFrame">Current frame <span></span></li>
 		<li><a id="play" href="javascript:void(0);">Play</a></li>
 		<li><a id="pause" href="javascript:void(0);">Pause</a></li>
 		<li><a id="stop" href="javascript:void(0);">Stop</a></li>
 	</ul>
 	
 	<script>
 		/*function image() 
 		{
 		    var ctx = document.getElementById('myCanvas').getContext('2d');
 		    var img = new Image();
 		    img.onload = function()
 			{
 		      ctx.drawImage
 			  (
 				img,
 				img.x || 0,
 				img.y || 0,
 				153,
 				140
 			   );
 		    }
 		    img.src = 'http://www.cchangeinc.com/dna/images/placeholder.jpg';
 		  }*/
 		
 		var image = {
 			setup: function () {
 				this.img = new Image();
 				this.img.src = 'http://www.cchangeinc.com/dna/images/placeholder.jpg';
 			},
 			
 			draw: function (ctx, kapi) {
 				if (!this.prototype.img.complete) {
 					return;
 				}
 				
 				ctx.drawImage
 				  (
 					this.prototype.img,
 					this.x || 0,
 					this.y || 0,
 					153,
 					140
 				   );
 			}
 		}
 	</script>
 	<script type="text/javascript">
 	
 		// Note:  jQuery is here just to make the demo quicker to make.
 		// Kapi does not use jQuery.
 		$('#play').click(function(ev){
 			ev.preventDefault();
 			demo.play();
 		});
 		
 		$('#pause').click(function(ev){
 			ev.preventDefault();
 			demo.pause();
 		});
 		
 		$('#stop').click(function(ev){
 			ev.preventDefault();
 			demo.stop();
 		});
 				
 		var demo = kapi(document.getElementById('myCanvas'), 
 			// params
 			{
 				fps : 20,
 				styles : {
 					'height': '300px',
 					'width': 500,
 					'background': '#000'
 				},
 				autoclear: true,
 				clearOnStop: true
 			},
 			// events
 			{
 				enterFrame: function() {
 					currFrameOutput.html(this._currentFrame);
 				}
 			}),
 			image1 = demo.add(image, {
 				name : 'myImage',
 				/*x : 0,
 				y : 0,*/
 				radius : 50,
 				color : '#0f0',
 				easing : 'easeInOutSine'
 			}),

 			currFrameOutput = $('#currentFrame span');
 		
 		
 		image1.keyframe('0.5', {
 				x : 15
 			}).keyframe('2s', {
 				x : 300,
 				y : 30
 			}).keyframe('3500ms', {
 				y : 250,
 				color: '#654321'
 			});
 		
 		demo.play();
 		
 		console.log('Logging the kapi instance object');
 		console.dir(demo);
 		console.log('Logging the kapi debug data');
 		console.dir(demo._debug());
 		
 	</script>

 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>kapi</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Jeremy Kahn">
	<!-- Date: 2010-12-07 -->

	<script src="../js/kapi.js"></script>
	<script src="../js/jquery.js"></script>
	<script src="../js/shapes.js"></script>

	<style type="text/css">
	canvas{
	float: left;
	}

	ul{
	float: left;
	}
	</style>
	</head>
	<body>

	<canvas id="myCanvas">Plz stop using IE.</canvas>

	<ul>
	<li id="currentFrame">Current frame <span></span></li>
	<li><a id="play" href="javascript:void(0);">Play</a></li>
	<li><a id="pause" href="javascript:void(0);">Pause</a></li>
	<li><a id="stop" href="javascript:void(0);">Stop</a></li>
	</ul>

	<script>
	/*function image()
	{
	var ctx = document.getElementById('myCanvas').getContext('2d');
	var img = new Image();
	img.onload = function()
	{
	ctx.drawImage
	(
	img,
	img.x \|\| 0,
	img.y \|\| 0,
	153,
	140
	);
	}
	img.src = 'http://www.cchangeinc.com/dna/images/placeholder.jpg';
	}*/

	var image = {
	setup: function () {
	this.img = new Image();
	this.img.src = 'http://www.cchangeinc.com/dna/images/placeholder.jpg';
	},

	draw: function (ctx, kapi) {
	if (!this.prototype.img.complete) {
	return;
	}

	ctx.drawImage
	(
	this.prototype.img,
	this.x \|\| 0,
	this.y \|\| 0,
	153,
	140
	);
	}
	}
	</script>
	<script type="text/javascript">

	// Note: jQuery is here just to make the demo quicker to make.
	// Kapi does not use jQuery.
	$('#play').click(function(ev){
	ev.preventDefault();
	demo.play();
	});

	$('#pause').click(function(ev){
	ev.preventDefault();
	demo.pause();
	});

	$('#stop').click(function(ev){
	ev.preventDefault();
	demo.stop();
	});

	var demo = kapi(document.getElementById('myCanvas'),
	// params
	{
	fps : 20,
	styles : {
	'height': '300px',
	'width': 500,
	'background': '#000'
	},
	autoclear: true,
	clearOnStop: true
	},
	// events
	{
	enterFrame: function() {
	currFrameOutput.html(this._currentFrame);
	}
	}),
	image1 = demo.add(image, {
	name : 'myImage',
	/*x : 0,
	y : 0,*/
	radius : 50,
	color : '#0f0',
	easing : 'easeInOutSine'
	}),

	currFrameOutput = $('#currentFrame span');


	image1.keyframe('0.5', {
	x : 15
	}).keyframe('2s', {
	x : 300,
	y : 30
	}).keyframe('3500ms', {
	y : 250,
	color: '#654321'
	});

	demo.play();

	console.log('Logging the kapi instance object');
	console.dir(demo);
	console.log('Logging the kapi debug data');
	console.dir(demo._debug());

	</script>

	</body>
	</html>