1．繞橢圓軌道旋轉的圓球
在Canvas畫布中繪制一個橢圓，然后在橢圓上繪制一個用綠色填充的實心圓。之后每隔0.1秒刷新，重新繪制橢圓和實心圓，重新繪制時，實心圓的圓心坐標發生變化，但圓心坐標仍然位於橢圓曲線上。這樣，可以得到繞橢圓軌道旋轉的圓球動畫。
編寫如下的HTML代碼。
<!DOCTYPE html>
<head>
<title>繞橢圓軌道旋轉的圓球</title>
<script type="text/javascript">
var context;
var width,height;
var i;
function draw(id)
{
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>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;"></canvas>
</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>
<title>網的繪制</title>
<script type="text/javascript">
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>
<body onload="draw('myCanvas');">
<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個點繪制的網
3．網的編織
我們可以將網的繪制過程進行動態展示，編寫HTML文件如下。
<!DOCTYPE html>
<head>
<title>網的編織（一）</title>
<script type="text/javascript">
var context;
var i;
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null)
return false;
context = canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
i=0;
setInterval(go,0.1);
}
function go()
{
context.strokeStyle="red";
context.lineWidth=2;
var x = Math.sin(i*0.02)*150+200;
var y = Math.cos(i*0.02 * 0.9)*150+150;
context.beginPath();
context.arc(x, y, 3, 0, 2 * Math.PI);
context.fillStyle = "red";
context.fill();
i=i+1;
if (i>=3600)
{
i=0;
context.clearRect(0,0,400,300);
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"></canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中網的編織動畫，如圖4所示。
圖4 網的編織（一）
我們可以取系統當前時間計算點的坐標，並且圓的填充顏色進行兩種顏色的切換，編寫HTML文件如下。
<!DOCTYPE html>
<html>
<head>
<title>網的編織（二）</title>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var flag=1;
function animate() {
window.requestAnimationFrame(animate);
draw();
}
function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin(time)*180+200;
var y = Math.cos(time * 0.9)*180+200;
flag = !flag;
context.fillStyle = flag ? 'rgb(200,200,10)' : 'rgb(10,10,200)';
context.beginPath();
context.arc(x, y, 10, 0, Math.PI*2, true);
context.closePath();
context.fill();
}
animate();
</script>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中網的編織另一種動畫，如圖5所示。
圖5 網的編織（二）