CANVAS animation
color change
HTML
<CANVAS id="canvas" width="400px" height="300px"></CANVAS>
CSS
canvas{border:1px solid black; height: 100%; width: 100%;}
JavaScript
var canvas,
context,
bounce = -1,
r = 0,
g=150,
b=250;
canvas = $("#canvas")[0];
context = canvas.getContext("2d");
context.fillStyle="#000000";
var width = canvas.width;
var height = canvas.height;
var a = Math.ceil(Math.random() * 10)
var point = {x:1,y:a,vx:1,vy:1};
setInterval(draw, 1000/500);
function draw() {
context.clearRect(0, 0, 500, 500);
// r= getR(r,5)
// g= getR(r,15)
// b= getR(r,30)
var xx = "rgb(" + r + ","+ g +","+ b +")";
context.fillStyle= xx;
a = Math.ceil(Math.random() * 10)
Circle(point.x, point.y, 20, 0, Math.PI * 2, false);
point.x += (Math.random() >= .5) ? point.vx - a : point.vx + 2 * a ;
point.y += (Math.random() >= .5) ? point.vx + a +1 : point.vx -a ;
if(point.x > width) {
point.x = width;
point.vx *= bounce;
}
else if(point.x < 0) {
point.x = 0;
point.vx *= bounce;
};
if(point.y > height) {
point.y = height;
point.vy *= bounce;
}
else if(point.y < 0) {
point.y = 0;
point.vy *= bounce;
};
};
function getR(color, inc){
var color = color;
if(Math.random() >= .5){
color = color - inc;
} else {
color = color + inc;
}
if(color + inc >= 255){
color =254;
}
if(color - inc <= 0){
color = 1;
}
return color;
}
//+++++++++++++++++++++++++++++++++++++++++
// CANVVAS UTILITIEZ
//+++++++++++++++++++++++++++++++++++++++++
function randomcolor(){
var r=Math.floor(Math.random()*255),
g=Math.floor(Math.random()*255),
...