java隨機生成多個小球，java 繪制動態小球_JavaScript動畫實例：動感小球

已知圓的坐標方程為：

X=R*SIN(θ)

Y=R*COS(θ)???? (0≤θ≤2π)

將0~2π區間等分48段，即設定間隔dig的值為π/24。θ初始值從0開始，按曲線方程求得坐標值(x,y)，并在當前坐標處繪制一個半徑為r(相比R，r小得多)實心圓。之后每隔0.05秒，清除畫布，將θ的初始值加π/24后，按曲線方程求得新坐標值(x,y)，并在求得的新坐標處再繪制一個半徑為r的實心圓，這樣，可以得到半徑為r的圓繞半徑為R的圓形軌道動態旋轉的動畫效果。旋轉一周后(即θ的值為2π)，令θ重新從初值0開始繼續動畫過程。

編寫如下的HTML代碼。

java隨機生成多個小球，var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var i=0;

setInterval(move,50);

function move()

{

Java小球循環反彈編程、ctx.clearRect(0,0,canvas.width,canvas.height);

var dig=Math.PI/24;

x0=250;

y0=200;

ctx.strokeStyle="green";

ctx.beginPath();

java小球？ctx.arc(x0,y0,100,0,Math.PI*2,true);

ctx.closePath();

ctx.stroke();

ctx.beginPath();

var x=100*Math.sin(i*dig)+x0;

var y=100*Math.cos(i*dig)+y0;

threejs 動畫、ctx.arc(x,y,5,0,Math.PI*2,true);

ctx.closePath();

ctx.fillStyle = "red";

ctx.fill();

i=i+1;

if (i>=48) i=0;

java小球八個方向移動，}

在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中呈現出如圖1所示繞圓周旋轉的小球。

圖1? 繞圓周旋轉的小球

圖1中圓周軌道只有一條，編寫如下的HTML文件，通過二重循環繪制如圖2所示的布滿整個Canvas的多條圓周軌道。

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

java編寫打怪游戲，var dig=Math.PI/24;

for (k=0;k<=14;k++)

for (n=0;n<=17;n++)

{

x0=30*n;

y0=30*k;

js object、ctx.beginPath();

ctx.strokeStyle="green";

ctx.arc(x0,y0,27,0,Math.PI*2,true);

ctx.closePath();

ctx.stroke();

}

jquery旋轉動畫、圖2? 布滿畫布的多條圓周軌道

仿圖1的程序，讓每條軌道上都有一個小球在旋轉。編寫如下的HTML文件。

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var i=0;

setInterval(move,30);

java小應用程序？function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

var dig=Math.PI/24;

for (k=0;k<=14;k++)

for (n=0;n<=17;n++)

java泛型？{

x0=30*n;

y0=30*k;

ctx.beginPath();

ctx.strokeStyle="green";

ctx.arc(x0,y0,27,0,Math.PI*2,true);

java小球碰壁反彈程序，ctx.closePath();

ctx.stroke();

var x=27*Math.sin(i*dig)+x0;

var y=27*Math.cos(i*dig)+y0;

ctx.beginPath();

ctx.arc(x,y,3,0,Math.PI*2,true);

css3實現動態小球。ctx.fillStyle = "black";

ctx.closePath();

ctx.fill();

}

i=i+1;

if (i>=48) i=0;

java項目開發實例、}

在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中呈現出如圖3所示多個繞圓周旋轉的小球。

圖3? 多個繞圓周旋轉的小球

在圖3中，所有小球旋轉步調一致，整齊劃一，缺少動感。如果為各個旋轉的小球加上相位，并去掉軌道痕跡。修改HTML文件如下。

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

jquery動畫效果實例。var i=0;

setInterval(move,30);

function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

var dig=Math.PI/24;

java小球自由落體代碼。for (k=0;k<=14;k++)

for (n=0;n<=17;n++)

{

x0=30*n;

y0=30*k;

var x=27*Math.sin((i+k*2+n*3)*dig)+x0;

canvas實現的動態3D旋轉球體。var y=27*Math.cos((i+k*2+n*3)*dig)+y0;

ctx.beginPath();

ctx.arc(x,y,3,0,Math.PI*2,true);

ctx.fillStyle = "black";

ctx.closePath();

ctx.fill();

javascript動畫效果，}

i=i+1;

if (i>=48) i=0;

}

在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中呈現出如圖4所示動感小球。

圖4 動感小球