Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
56 lines (48 sloc) 1.67 KB
<!--
gury - A jQuery inspired canvas utility library
Another demo to show you how to use gury.
By Ryan Sandor Richards
-->
<!DOCTYPE html>
<html>
<head>
<title>Automatic Event Binding Demo - By Ryan Sandor Richards</title>
</head>
<body style="font-family: helvetica; background-color: #444; color: #ddd; text-align: center">
<h1>Auto Event Binding Demo</h1>
<p>By Ryan Sandor Richards</p>
<!-- Create a canvas on the page -->
<canvas id="screen"></canvas>
<!-- Nice little link back to the repo -->
<p><a href="http://github.com/rsandor/gury" style="color: white">Project on github</a></p>
<!-- Add jQuery for load behaviors -->
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Include the gury library -->
<script type="text/javascript" charset="utf-8" src="../gury.js"></script>
<!-- Now script up a neato canvas scene! -->
<script type="text/javascript" charset="utf-8">$(function() {
$g('screen').size(100, 100).add({
theta: 0,
color: '#ada',
colors: {
'#ada': '#bc0',
'#bc0': '#aaf',
'#aaf': '#39a',
'#39a': '#ada'
},
draw: function(ctx) {
ctx.save();
ctx.translate(50, 50);
ctx.rotate(this.theta);
ctx.fillStyle = this.color;
ctx.fillRect(-32, -32, 64, 64);
ctx.restore();
this.theta += Math.PI / 120;
},
click: function(e) {
this.color = this.colors[this.color];
}
}).play(16);
});</script>
</body>
</html>