Ha, no me deja ponerlo arriba asi que aqui pongo el codigo.
Código Javascript
:
Ver original<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var MyBalls = new balls("balls");
MyBalls.$canvas.resizable();
for( var i = 0; i < 10; i++ ) {
MyBalls.create(
(i+1) * 60,
50,
3 * (i+1),
'rgb('+(100+parseInt(Math.random()*151))+', '+(100+parseInt(Math.random()*151))+', '+(100+parseInt(Math.random()*151))+')' );
}
setInterval(function() {
$.each( MyBalls.balls, function(i_ball, ball) {
ball.move();
} );
}, 1);
});
var balls = function( id ) {
this.$canvas = $("#"+id);
this.context = this.$canvas[0].getContext("2d");
this.balls = [];
};
balls.prototype = {
create: function(CENTERX, CENTERY, RADIUS, COLOR, NO_NEW) {
var Context = this.context;
var This = this;
Context.beginPath();
Context.arc(CENTERX, CENTERY, RADIUS, 0, 2*Math.PI);
Context.closePath();
Context.strokeStyle = COLOR;
Context.fillStyle = COLOR;
Context.stroke();
Context.fill();
if ( NO_NEW ) {
return;
}
var BallConstructor = function() {
this.centerX = CENTERX;
this.centerY = CENTERY;
this.radius = RADIUS;
this.color = COLOR;
this.dirX = 1;
this.dirY = 1;
this.speed= 1;
};
BallConstructor.prototype = {
coords: function() {
return {
x1: this.centerX - this.radius,
x2: this.centerX + this.radius,
y1: this.centerY - this.radius,
y2: this.centerY + this.radius,
minX: 0,
maxX: This.$canvas.width(),
minY: 0,
maxY: This.$canvas.height()
}
},
move: function( SPEED, DIR ) {
this.speed = SPEED || 1;
this.dir = DIR || 1;
var coords = this.coords();
var axis = [
['x', 'X'],
['y', 'Y']
];
for ( var i=0; i<2; i++ ) {
var invert = false;
var ax = axis[i][0];
var AX = axis[i][1];
var axis1 = coords[ax+'1'];
var axis2 = coords[ax+'2'];
var min_axis = coords['min'+AX];
var max_axis = coords['max'+AX];
var ThisBall = this;
var prevcenter = this['center'+AX];
var forward = this['dir'+AX] === 1 ? true : false;
if ( axis1 - this.speed <= min_axis && !forward ) {
prevcenter = min_axis + this.radius;
invert = true;
}
if ( axis2 + this.speed >= max_axis && forward ) {
prevcenter = max_axis - this.radius;
invert = true;
}
$.each( This.balls, function(i_ball, that_ball) {
if ( ThisBall == that_ball ) {
return 'continue';
}
var that_coords = that_ball.coords();
var cond1 = coords.x1 - ThisBall.speed <= that_coords.x2;
var cond2 = coords.x2 + ThisBall.speed >= that_coords.x1;
var cond3 = coords.y1 - ThisBall.speed <= that_coords.y2;
var cond4 = coords.y2 + ThisBall.speed >= that_coords.y1;
if ( cond1 && cond2 && cond3 && cond4 ) {
invert = true;
}
} );
this['center'+AX] = prevcenter;
if ( invert ) {
this['dir'+AX] *= -1;
}
}
this.centerX += this.speed * this.dirX;
this.centerY += this.speed * this.dirY;
This.clear();
$.each( This.balls, function( i, ball ) {
This.create(ball.centerX, ball.centerY, ball.radius, ball.color, true);
});
}
};
var BallObject = new BallConstructor;
this.balls.push(BallObject);
return BallObject;
},
clear: function() {
this.context.clearRect(
0, 0, this.$canvas.width(), this.$canvas.height()
);
}
};
</script>
</head>
<body>
<canvas id="balls" width="800" height="400" style="border: 1px solid #000">
</canvas>
</body>
</html>
Rendimiento muy lento en HTML5? 
