canvas demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>泡泡特效</title>
<style>
*{
margin:0;
padding:0;
}
canvas{
display:block;
background-color:#000000;
}
</style>
</head>
<body>
<canvas id="Bubble"></canvas>
<script>
var canvas = document.getElementById("Bubble");
canvas.width = innerWidth;
canvas.height = innerHeight;
window.onresize = function(){
canvas.width = innerWidth;
canvas.height = innerHeight;
}
var ctx = canvas.getContext("2d");
setInterval("runCircle()",1000/2);
function runCircle(){
ctx.clearRect(0,0,innerWidth,innerHeight);
var count = 0;
do{
randomCircle();
count++;
}while(count<200);
}
function randomCircle(){
var r = Math.floor(Math.random()*255);
r = r.toString(16);
var g = Math.floor(Math.random()*255);
g = g.toString(16);
var b = Math.floor(Math.random()*255);
b = b.toString(16);
var rgb = "#"+r+g+b;
var x = Math.floor(Math.random()*innerWidth);
var y = Math.floor(Math.random()*innerHeight);
var radius = Math.floor(Math.random()*20)
ctx.fillStyle = rgb;
ctx.beginPath();
ctx.arc(x,y,radius,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
}
</script>
</body>
</html>