JavaScript動畫實例：旋轉的圓球

時間 2019-12-21

原文原文鏈接

1．繞橢圓軌道旋轉的圓球

在Canvas畫布中繪製一個橢圓，而後在橢圓上繪製一個用綠色填充的實心圓。以後每隔0.1秒刷新，從新繪製橢圓和實心圓，從新繪製時，實心圓的圓心座標發生變化，但圓心座標仍然位於橢圓曲線上。這樣，能夠獲得繞橢圓軌道旋轉的圓球動畫。javascript

編寫以下的HTML代碼。html

<!DOCTYPE html>java

<head>canvas

<title>繞橢圓軌道旋轉的圓球</title>瀏覽器

var context;3d

var width,height;htm

var i;blog

function draw(id)ip

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

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

width=canvas.width;

height=canvas.height;

i=0;

setInterval(move,100);

}

function move()

{

context.clearRect(0,0,width,height);

var dig=Math.PI/24;

context.beginPath();

context.strokeStyle="green";

context.ellipse(150,150,120,60,0,0,Math.PI*2,true);

context.stroke();

context.closePath();

var x=120*Math.sin(i*dig)+150;

var y=60*Math.cos(i*dig)+150;

context.beginPath();

context.arc(x,y,10,0,Math.PI*2,true);

context.fillStyle = "red";

context.fill();

context.closePath();

i=i+1;

if (i>=48) i=0;

}

</script>

</head>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中呈現出繞橢圓軌道旋轉的圓球。

圖1 繞橢圓軌道旋轉的圓球

2．網的繪製

設立座標計算公式爲：

X=R*SIN(α)

Y=R*COS(α*0.9)

再用循環依次取α值爲0~20（每次增量爲0.02），計算出X和Y,在canvas畫布中將座標點（X,Y）用線連起來，可繪製出一個曲線圖形。

編寫HTML文件以下：

<!DOCTYPE html>

<head>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,300);

context.strokeStyle="red";

context.lineWidth=2;

context.beginPath();

var r=150;

for (var i=0;i<1000;i++)

{

var x = Math.sin(i*0.02)*r+200;

var y = Math.cos(i*0.02 * 0.9)*r+150;

if (i==0)

{

context.moveTo(x,y);

}

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖2所示的圖形。若修改語句「for (var i=0;i<1000;i++)」爲「for (var i=0;i<3600;i++)」，保存後從新在瀏覽器中打開，能夠看到在瀏覽器窗口中繪製出如圖3所示的圖形。

圖2 鏈接1000個點繪製的圖形

圖3 鏈接3600個點繪製的網