JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球

第JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球本文實(shí)例為大家分享了JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球的具體代碼，供大家參考，具體內(nèi)容如下

效果如下:

思路:

1.制定畫布,確定好坐標(biāo)

2.繪制出圓形小球

3.給圓一個(gè)原始坐標(biāo),xy軸的速度

4.每20毫秒刷新一次,達(dá)到變化的目的

5.判斷邊緣

全部代碼及釋義如下:

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metaname="viewport"content="width=device-width,initial-scale=1.0"

metahttp-equiv="X-UA-Compatible"content="ie=edge"

titleDocument/title

/head

body

canvasid="canvas"

當(dāng)前瀏覽器不支持canvas,請(qǐng)更新瀏覽器或者升級(jí)瀏覽器后再試

/canvas

script

//x:小球原始x坐標(biāo),y:小球原始y坐標(biāo),r:小球半徑,vx:x軸速度,vy:y軸的速度(速度都以向量表示,所以可為負(fù)數(shù))

varball={x:512,y:100,r:20,vx:-8,vy:8,color:'#005588'}

window.onload=function(){

varcanvas=document.getElementById("canvas");

//制定canvas畫布的大小

canvas.width=860;

canvas.height=600;

//判斷瀏覽器是否支持canvas

if(canvas.getContext("2d")){

//下面所有調(diào)用的函數(shù)都是基于context這個(gè)上下文環(huán)境來進(jìn)行的

varcontext=canvas.getContext("2d");

setInterval(()={

render(context)

update()

},20);

}else{

alert("當(dāng)前瀏覽器不支持canvas,請(qǐng)更新瀏覽器或者升級(jí)瀏覽器后再試");

}

};

//十六進(jìn)制顏色隨機(jī)

functioncolor16(){

varr=Math.floor(Math.random()*256);

varg=Math.floor(Math.random()*256);

varb=Math.floor(Math.random()*256);

varcolor='#'+r.toString(16)+g.toString(16)+b.toString(16);

returncolor;

}

//小球的坐標(biāo)的刷新

functionupdate(){

ball.x+=ball.vx//x軸坐標(biāo)vx是x軸的速度,勻速增加

ball.y+=ball.vy

//y軸坐標(biāo)由于g的原因,速度是勻變速

//觸底的條件

if(ball.y=canvas.height-ball.r){

ball.color=color16()

ball.y=canvas.height-ball.r

//觸下底

ball.vy=-ball.vy

}elseif(ball.x=ball.r){

ball.color=color16()

ball.x=ball.r//觸左

ball.vx=-ball.vx

}elseif(ball.x=canvas.width-ball.r){

ball.color=color16()

ball.x=canvas.width-ball.r

//觸右

ball.vx=-ball.vx

}elseif(ball.y=ball.r){

ball.color=color16()

ball.y=ball.r

//觸上

ball.vy=-ball.vy

}

}

//繪制圓形小球

functionrender(cxt){

//利用clearRect,清空畫布

cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)

cxt.fillStyle=ball.color

cxt.beginPath()

//context.arc(圓心橫坐標(biāo),原型縱坐標(biāo),半徑的長度,繪制的起點(diǎn),繪制的終點(diǎn))

cxt.arc(ball.x,ball.y,ball.r,