一、❤ ❤实现效果
二、❤ ❤代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#can{border:1px solid #999;}</style></head><body><!-- 面向对象的小球 --><canvas id="can" width="500" height="500"></canvas><script>var can =document.getElementById("can");var ctx=can.getContext('2d');var w=h=500;// 面向对象// 随机数// 起始坐标x 起始坐标y 小球半径r x轴速度 y轴速度function r(num){return Math.random()*num;}var a=parseInt(r(10));console.log(a);// step1:创建小球类function Ball(){this.x=parseInt(r(5))+60;//因为半径最大为60 所以保持60的距离this.y=parseInt(r(3))+60;this.r=parseInt(r(40))+10;//10-50// 随机颜色this.color='#'+parseInt(Math.random()*0xffffff).toString(16);// this.xSpeed=r(3)+2;//[2,5]// this.xSpeed=r(3)+1;//[1,4]this.ySpeed=parseInt(r(3))+2this.xSpeed=parseInt(r(3))+1}//step2: 定义小球显示方法Ball.prototype.show=function(){// 更新坐标this.run();ctx.beginPath()ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fillStyle=this.color;ctx.fill()ctx.closePath()};//step3: 定义小球运动的方法Ball.prototype.run=function(){if(this.x-this.r<=0 || this.x+this.r>=w){this.xSpeed= -this.xSpeed;}this.x=this.x+this.xSpeed;if(this.y-this.r<=0 || this.y+this.r>=h){this.ySpeed= -this.ySpeed;}this.y=this.y+this.ySpeed;};// step4:创建一个小球数组(一个大篮子)var ballArr=[];// 创建一个小球的数组for(var i=0;i<10;i++){var ball=new Ball();// 放入小球数组ballArr.push(ball);ball.show();}// step5:小球运动setInterval(function(){// 清除画布ctx.clearRect(0,0,w,h);// 遍历数组for(var j=0;j<ballArr.length;j++){var ball=ballArr[j];// 更新坐标，显示小球// ball.run();ball.show();// console.log(ballArr);}// console.log(00);},10);</script></body></html>
三、❤ ❤思路
1.创建画布宽500高500（记住宽高写在canvas里与写在css里是不一样的！！！！！）
<canvas id="can" width="500" height="500"></canvas>
2.获取上下文
var can =document.getElementById("can");var ctx=can.getContext('2d');
3.创建一个随机方法（用于设置小球宽高，颜色位置）
function r(num){return Math.random()*num;}
4.创建小球类， 起始坐标x 起始坐标y 小球半径r 小球颜色 x轴速度 y轴速度全部随机，记得要parseInt（我之前忘记使用ParseInt然后小球出不来），虽然小球初始位置的随机的，但是给小球设置初始位置至少是（60,60），因为小球的坐标是小球圆心的坐标，如果小球一开始出现在（1,1）等这些靠近边缘的地方，那么小球会一直贴着边缘运动，具体原因看小球的运动方法
// step1:创建小球类function Ball(){this.x=parseInt(r(5))+60;//因为半径最大为60 所以保持60的距离this.y=parseInt(r(3))+60;this.r=parseInt(r(40))+10;//10-50// 随机颜色this.color='#'+parseInt(Math.random()*0xffffff).toString(16);// this.xSpeed=r(3)+2;//[2,5]// this.xSpeed=r(3)+1;//[1,4]this.ySpeed=parseInt(r(3))+2this.xSpeed=parseInt(r(3))+1}
5.定义小球运动方法，小球左侧小于或等于零，右侧大于或者等于画布宽小球马上改变运动方向避免出去
//step3: 定义小球运动的方法Ball.prototype.run=function(){if(this.x-this.r<=0 || this.x+this.r>=w){this.xSpeed= -this.xSpeed;}this.x=this.x+this.xSpeed;if(this.y-this.r<=0 || this.y+this.r>=h){this.ySpeed= -this.ySpeed;}this.y=this.y+this.ySpeed;};
6.创建一个小球数组
// step4:创建一个小球数组(一个大篮子)var ballArr=[];
7.循环让所有小球出现
for(var i=0;i<10;i++){var ball=new Ball();// 放入小球数组ballArr.push(ball);ball.show();}
8.让小球运动起来（小球运动一定不能忘了清除画布clearRect!!!）
// step5:小球运动setInterval(function(){// 清除画布ctx.clearRect(0,0,w,h);// 遍历数组for(var j=0;j<ballArr.length;j++){var ball=ballArr[j];// 更新坐标，显示小球// ball.run();ball.show();// console.log(ballArr);}// console.log(00);},10);
四、❤ ❤总结
赶快行动起来吧！！！动手自己试试看
