Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (71 sloc) 2.19 KB
<html>
<head>
<title>Canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jcanvas.js" type="text/javascript"></script>
<style type="text/css">
body { background-color: red; width: 100%; height: 100%; padding:0; margin:0;}
canvas { padding:0;margin:0;position:absolute}
div {display:block;float:left;width:100px;height:100px;margin:10px;background-color:gray;}
</style>
<script type="text/javascript">
$(function(){
$('canvas')
.mousemove(function(e){
if (e) {
$ctx.mouse = $ctx.eventToPoint(e);
if ($ctx.mousedown) {
$ctx.addObject({
type: 'rainbowCircle',
data: $ctx.mouse
}
)};
}
}).mousedown(function(e){
$ctx.mousedown = $ctx.eventToPoint(e);
return true;
}).mouseup(function(e){
up = $ctx.eventToPoint(e);
if ($ctx.distance($ctx.mousedown, up) < 25) {
$ctx.handleClick(up)
}
$ctx.mousedown = false;
return true;
}).resize(function(){
$ctx.width = $(this).width();
$ctx.height = $(this).height();
})
$(window).resize(function(){
$('canvas')
.attr('width',$('body').width())
.attr('height', $('body').height())
.resize()
.mousemove();
}).resize()
$ctx.animate(10);
$(document).keyup(function(e){
switch(e.keyCode) {
case 76: $.getJSON('json.js', function(data){ $ctx.objects = data }); break
case 67: $ctx.objects = []; break
case 83: clearTimeout($ctx.animate.timeout); break
case 71: $ctx.animate(10); break
case 68: $ctx.debug ^= true; break
}
})
$ctx.namedObjects.button = $ctx.addObject({
type: 'button',
data: {
width: 100,
height: 100,
x: 250,
y: 250,
click: function(){
this.x += 5;
}
}
});
});
</script>
</head>
<body><canvas></canvas></body>
</html>