JavaScript結(jié)合Canvas繪畫畫運(yùn)動(dòng)小球

第JavaScript結(jié)合Canvas繪畫畫運(yùn)動(dòng)小球目錄1.實(shí)現(xiàn)思路2.靜態(tài)效果3.總結(jié)前言：

canvas是HTML5新增的元素,也被稱為畫布,可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動(dòng)畫效果,現(xiàn)在我們也來使用canvas畫隨機(jī)運(yùn)動(dòng)小球。

1.實(shí)現(xiàn)思路

首先為了達(dá)到我們想要的效果,可以先創(chuàng)建一個(gè)構(gòu)造函數(shù)。給構(gòu)造函數(shù)添加對(duì)應(yīng)的屬性和方法。實(shí)例化出多個(gè)對(duì)象,并且保存在數(shù)組中。遍歷每個(gè)對(duì)象,實(shí)現(xiàn)畫圓。間隔修改每個(gè)球的x,y值。

先準(zhǔn)備畫布確定對(duì)應(yīng)的寬高:

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

因?yàn)槭请S機(jī)運(yùn)動(dòng),所以要?jiǎng)?chuàng)建一個(gè)獲取隨機(jī)數(shù)的方法:

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;

//創(chuàng)建一個(gè)Ball的構(gòu)造函數(shù)

functionBall(maxWidth,maxHeight,ctx){

this.ctx=ctx;

this.maxWidth=maxWidth;

this.maxHeight=maxHeight;

//隨機(jī)半徑

this.r=getRandomNum(5,15);

//隨機(jī)x,y坐標(biāo)

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

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

//平移速度,正負(fù)區(qū)間是為了移動(dòng)方向多樣

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

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

//顏色隨機(jī)

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(){

//判斷邊界值,讓圓球始終保證在畫面內(nèi)

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;

//創(chuàng)建100個(gè)Ball實(shí)例

letballs=[];

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

letnewBall=newBall(maxWidth,maxHeight,ctx);

newBall.draw();

balls.push(newBall);

}

2.靜態(tài)效果

現(xiàn)在我們畫出了不同半徑和顏色的靜止圓球：

調(diào)用move方法,間隔修改每個(gè)球的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);

效果展示：