JavaScript動畫實例：螺旋線

時間 2020-07-16

原文原文鏈接

數學中有各式各樣富含詩意的曲線，螺旋線就是其中比較特別的一類。螺旋線這個名詞來源於希臘文，它的原意是「旋卷」或「纏卷」。例如，平面螺旋即是以一個固定點開始向外逐圈旋繞而造成的曲線。在2000多年之前，古希臘數學家阿基米德就對螺旋線進行了研究。著名數學家笛卡爾於1683年首先描述了對數螺旋線，而且列出了螺旋線的解析式。html

1．阿基米德螺線

阿基米德螺線亦稱「等速螺線」。當一點P沿動射線OP以等速率運動的同時，該射線又以等角速度繞點O旋轉，點P的軌跡稱爲「阿基米德螺線」。canvas

將動點P的軌跡動態出現出來，編寫以下的HTML代碼。瀏覽器

<!DOCTYPE>動畫

<html>spa

<head>orm

<title>阿基米德螺線</title>htm

</head>blog

<body>ip

<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;">get

</canvas>

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

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

var i=0;

var j=0.1;

ctx.clearRect(0,0,400,300);

function motion()

{

i=i+j;

r=15*i;

ang=12;

ctx.beginPath();

ctx.moveTo(200,150);

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

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

ctx.font="40px Georgia";

ctx.textAlign='center';

ctx.fillStyle='red';

ctx.fillText('.',x,y);

ctx.lineTo(x,y);

ctx.strokeStyle='rgba(0,255,0,0.6)';

ctx.stroke();

if (i<0)

{

j=0.1;

ctx.clearRect(0,0,400,300);

}

if (i>ang)

{

j=-0.1;

ctx.clearRect(0,0,400,300);

}

setInterval('motion()',100);

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠在瀏覽器窗口中看到阿基米德螺線的動態繪製過程，如圖1所示。

圖1 阿基米德螺線

2．更多的螺線

雙曲螺線也是一種典型的螺旋線，它是阿基米德螺線的倒數。

由於阿基米德螺線的極座標方程爲： r=cθ （其中c爲常數）

而的雙曲螺線的極座標方程爲： rθ = c （其中c爲常數）

所以，將上面程序中的語句

r=15*i;

ang=12;

改寫爲：r=200/i;

ang=24;

就能夠在畫布中看到如圖2所示的雙曲螺線的動態繪製過程。

圖2 雙曲螺線

還有其餘的螺旋線，如費馬螺線、連鎖螺線、對數螺線等，都可以如同雙曲螺線同樣，適當修改語句「r=15*i;」和「ang=12;」便可。

爲此，編寫以下的HTML代碼。

<!DOCTYPE>

<html>

<head>

<title>螺旋線動畫</title>

</head>

<body>

</canvas>

<input id="R1" name="spiral" type="radio" checked onclick="go()" />阿基米德螺線<br/><br/>

</form>

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

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

var i=0;

var j=0.05;

function motion()

{

i=i+j;

if(document.getElementById('R1').checked)

{ r=15*i; ang=12; }

if(document.getElementById('R2').checked)

{ r=200/i; ang=18; }

if(document.getElementById('R3').checked)

{ r=20*Math.pow(i,0.5); ang=36; }

if(document.getElementById('R4').checked)

{ r=Math.pow(1.2,i); ang=30; }

if(document.getElementById('R5').checked)

{ r=Math.pow(10000*Math.cos(2*i),0.5); ang=32; }

if(document.getElementById('R6').checked)

{ r=Math.pow(10000/i,0.5); ang=32; }

ctx.beginPath();

ctx.moveTo(200,150);

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

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

ctx.font="40px Georgia";

ctx.textAlign='center';

ctx.fillStyle='red';

ctx.fillText('.',x,y);

ctx.lineTo(x,y);

ctx.strokeStyle='rgba(0,255,0,0.6)';

ctx.stroke();

if (i<0)

{

j=0.05;

ctx.clearRect(0,0,400,300);

}

if (i>ang)

{

j=-0.05;

ctx.clearRect(0,0,400,300);

}

function go()

{

ctx.clearRect(0,0,400,300);

i=0;

j=0.05;

setInterval('motion()',70);

}

go();

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠在瀏覽器窗口中看到6種螺旋線的動畫效果，如圖3所示。

圖3 螺旋線動畫

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。