Canvas 动态小球重叠效果

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 动态小球重叠效果</title>
<script>
window.onload=function()
{
var canvas=document.getElementById('canvas');
var w=canvas.width;
var h=canvas.height;
var num=30;  // 小球个数
var balls=[]; // 小球存放数组
var cxt=canvas.getContext('2d');
var t=null; function getBalls() // 创建小球
{
for(var i=0;i<num;i++)
{
// 小球随机颜色
var tempR=Math.floor(Math.random()*255);
var tempG=Math.floor(Math.random()*255);
var tempB=Math.floor(Math.random()*255);
var tempColor='rgb('+tempR+','+tempG+','+tempB+')'; //小球随机大小位置
var tempR=Math.floor(Math.random()*30+20);
var tempX=Math.floor(Math.random()*(w-tempR)+tempR);
var tempY=Math.floor(Math.random()*(h-tempR)+tempR); var tempBall={
x:tempX,
y:tempY,
r:tempR,
color:tempColor,
stepX:Math.floor(Math.random()*20-10),
stepY:Math.floor(Math.random()*20-10), // 步长 差值
};
balls.push(tempBall);
}//-----------------------------------------创建小球
} function updateBalls() // 更新小球
{
for(var i=0;i<balls.length;i++)
{
balls[i].x+=balls[i].stepX;
balls[i].y+=balls[i].stepY;
bumpTest(balls[i]); // 更新后的小球数组 x y 位置
}
} function bumpTest(ele) // 碰撞检测
{
//zuo -->向右走
if(ele.x<=ele.r)
{
ele.x=ele.r;
ele.stepX=-ele.stepX; // 反方向运动
}
// you
if(ele.x >= w-ele.r)
{
ele.x=w-ele.r;
ele.stepX=-ele.stepX;
}
//shang
if(ele.y<=ele.r)
{
ele.y=ele.r;
ele.stepY=-ele.stepY;
}
// xia
if(ele.y>=h-ele.r)
{
ele.y=h-ele.r
ele.stepY=-ele.stepY;
}
} function renderBalls()//重置画布
{
cxt.clearRect(0,0,w,h); // 清空画布
for(var i=0;i<balls.length;i++)
{
cxt.beginPath();// 开始路径
cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
cxt.fillStyle=balls[i].color;
cxt.globalCompositeOperation='xor';
cxt.closePath();// 闭合路径
cxt.fill(); //填充颜色
}
} getBalls();
clearInterval(t);
t=setInterval(function(){
updateBalls();// 更新小球
renderBalls();// 重新绘制小球
},50); } </script>
</head> <body>
<button onClick="window.history.go()"> 点击变换 </button>
<canvas width="500" height="300" style="border:1px solid #000" id="canvas"></canvas>
</body>
</html>
上一篇:比较详细PHP生成静态页面教程


下一篇:PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程