Skip to content

Instantly share code, notes, and snippets.

@fillano

fillano/gist:1033092

Created June 18, 2011 13:21
Show Gist options
  • Save fillano/1033092 to your computer and use it in GitHub Desktop.
Save fillano/1033092 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<style>
div {
background: #AACCEE;
border: solid 1px #336699;
margin: 10px;
padding: 5px;
border-radius: 5px;
display: inline-block;
text-align: center
}
canvas {
cursor: pointer;
}
</style>
<body><div>test</div><div id="container"><canvas id="a_canvas" width="800" height="800"></canvas></div>
<script type="text/javascript">
(function(){
var canvas = document.getElementById("a_canvas");
var ctx = canvas.getContext("2d");
var a= "red";
var b= "yellow";
var c= "#AACCEE";
var d= "rgba(170,204,238,0)";
var balls = [];
setInterval(render, 300);
canvas.onclick = function(e){
balls.push({
startX : e.pageX-e.currentTarget.offsetLeft,
startY : e.pageY-e.currentTarget.offsetTop,
i : 0
});
}
function render() {
for(var i=0; i<balls.length; i++) {
drawBall(i);
}
}
function drawBall(idx){
var r = 10+balls[idx].i*2;
var g = ctx.createRadialGradient(balls[idx].startX, balls[idx].startY, balls[idx].i+3, balls[idx].startX, balls[idx].startY, r);
g.addColorStop(0, a);
g.addColorStop(0.7, b);
g.addColorStop(0.9, c);
g.addColorStop(1.0, d);
ctx.fillStyle = g;
ctx.fillRect(
(balls[idx].startX-r)>0?balls[idx].startX-r:0,
(balls[idx].startY-r)>0?balls[idx].startY-r:0,
(balls[idx].startX+r)<800?balls[idx].startX+r:800,
(balls[idx].startY+r)<800?balls[idx].startY+r:800
);
balls[idx].i+=5;
if(balls[idx].i>70){
ctx.save();
ctx.globalCompositeOperation = "xor";
ctx.fillRect(
(balls[idx].startX-r)>0?balls[idx].startX-r:0,
(balls[idx].startY-r)>0?balls[idx].startY-r:0,
(balls[idx].startX+r)<800?balls[idx].startX+r:800,
(balls[idx].startY+r)<800?balls[idx].startY+r:800
);
ctx.restore();
balls.shift();
}
}
}());
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment