JavaScript结合Canvas绘画画运动小球

第JavaScript结合Canvas绘画画运动小球目录1.实现思路2.静态效果3.总结前言：

canvas是HTML5新增的元素,也被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,现在我们也来使用canvas画随机运动小球。

1.实现思路

首先为了达到我们想要的效果,可以先创建一个构造函数。给构造函数添加对应的属性和方法。实例化出多个对象,并且保存在数组中。遍历每个对象,实现画圆。间隔修改每个球的x,y值。

先准备画布确定对应的宽高:

canvasid="canvas"width="400"height="400"/canvas

script

letcanvas=document.getElementById('canvas');

letctx=canvas.getContext('2d');

letmaxWidth=canvas.width,

maxHeight=canvas.height;

ctx.fillStyle='#000';

ctx.fillRect(0,0,maxWidth,maxHeight);

/script

因为是随机运动,所以要创建一个获取随机数的方法:

functiongetRandomNum(minNum,maxNum){

switch(arguments.length){

case1:

returnMath.round(Math.random()*minNum+minNum);

break;

case2:

returnMath.round(

Math.random()*(maxNum-minNum)+minNum);

break;

case0:

return0;

break;

//创建一个Ball的构造函数

functionBall(maxWidth,maxHeight,ctx){

this.ctx=ctx;

this.maxWidth=maxWidth;

this.maxHeight=maxHeight;

//随机半径

this.r=getRandomNum(5,15);

//随机x,y坐标

this.x=getRandomNum(this.r,this.maxWidth-this.r);

this.y=getRandomNum(this.r,this.maxHeight-this.r);

//平移速度,正负区间是为了移动方向多样

this.speedX=getRandomNum(-2,2);

this.speedY=getRandomNum(-2,2);

//颜色随机

this.color=`rgba(${getRandomNum(0,255)},

${getRandomNum(0,255)},

${getRandomNum(0,255)},${Math.random()})`;

Btotype={

draw:function(){

ctx.beginPath();

ctx.fillStyle=this.color;

ctx.arc(this.x,this.y,this.r,0,Math.PI*2);

ctx.fill();

ctx.closePath();

move:function(){

//判断边界值,让圆球始终保证在画面内

if(this.xthis.maxWidth-this.r||this.xthis.r){

this.speedX=-this.speedX;

if(this.ythis.maxHeight-this.r||this.ythis.r){

this.speedY=-this.speedY;

this.x+=this.speedX;

this.y+=this.speedY;

//创建100个Ball实例

letballs=[];

for(leti=0;i100;i++){

letnewBall=newBall(maxWidth,maxHeight,ctx);

newBall.draw();

balls.push(newBall);

}

2.静态效果

现在我们画出了不同半径和颜色的静止圆球：

调用move方法,间隔修改每个球的x,y值。

setInterval(()={

//每次画之前都要清除画布

ctx.clearRect(0,0,maxWidth,maxHeight);

ctx.fillStyle='#000';

ctx.fillRect(0,0,maxWidth,maxHeight);

for(letj=0;j100;j++){

balls[j].draw(ctx);

balls[j].move();

},100);

效果展示：