JavaScript動畫實例：李薩如曲線

時間 2019-12-27

原文原文鏈接

在「JavaScript圖形實例：阿基米德螺線」和「JavaScript圖形實例：曲線方程」中，咱們學習了利用曲線的方程繪製曲線的方法。若是想看看曲線是怎樣繪製出來的，怎麼辦呢？編寫簡單的動畫，就能夠展現指定曲線的繪製過程。javascript

1．李薩如曲線

設定李薩如曲線的座標方程爲：html

X=SIN(2θ)java

Y=SIN(3θ) （0≤θ≤2π）canvas

將0~2π區間等分512段，取θ的初始值π/256，按曲線方程求得座標值(x,y)，並在當前座標處經過繪製一個實心圓的方式描點。以後每隔0.02秒，將θ的初始值加π/256後，按曲線方程求得新座標值(x,y)，並在求得的新座標處再經過繪製一個實心圓的方式繼續描點，這樣，能夠獲得動態繪製的李薩如曲線。曲線繪製完成（即θ的值爲2π），將畫布清除，令θ從新從初值π/256開始繼續動畫過程。瀏覽器

編寫以下的HTML代碼。學習

<!DOCTYPE html>動畫

<head>spa

<title>李薩如曲線</title>htm

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,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var dig=Math.PI/256;

x=150+100*Math.sin(2*i*dig);

y=150-100*Math.sin(3*i*dig);

context.beginPath();

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

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>512)

{

i=1;

context.clearRect(0,0,300,300);

}

</script>

</head>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中呈現出李薩如曲線的動態繪製過程，如圖1所示。

圖1 李薩如曲線

2．阿基米德螺線

編寫HTML文件以下：

<!DOCTYPE html>

<head>

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

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,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var dig=Math.PI/128;

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

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

context.beginPath();

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

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>1024)

{

i=1;

context.clearRect(0,0,300,300);

}

</script>

</head>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中呈現出阿基米德螺線的動態繪製過程，如圖2所示。

圖2 阿基米德螺線

3．螺旋線

設定螺旋線的座標方程爲：

X=30*COS(θ)+70*COS(θ/4)

Y=30*SIN(θ) - 70*SIN(θ/4) （0≤θ≤8π）

將螺旋線的繪製過程進行動態展現，編寫HTML文件以下。

<!DOCTYPE html>

<head>

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,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var x = 150+30*Math.cos(i*Math.PI/72) +70*Math.cos(i/4*Math.PI/72);

var y = 150+30*Math.sin(i*Math.PI/72) -70*Math.sin(i/4*Math.PI/72);

context.beginPath();

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

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>576)

{

i=1;

context.clearRect(0,0,300,300);

}

</script>

</head>

</body>

</html>

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

圖3 螺旋線繪製

4．七彩花瓣

設定四葉花瓣線的座標方程爲：

X=R*COS(2θ)*SIN(θ)

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

按這個方程，能夠繪製如圖4所示的四葉花瓣線。

圖4 四葉花瓣線

將四葉花瓣線的繪製過程進行動態展現，而且每繪製一個新點，填充顏色在7中顏色間進行切換，這樣繪製出七彩花瓣。編寫HTML文件以下。

<!DOCTYPE>

<html>

<head>

</head>

<body >

</canvas>

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

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

var i=0;j=0.05,t=0;

var colors=new Array('red','orange','yellow','green','cyan','blue','purple');

function timing() {

t=t+1;

i=i+j;

var r=120*Math.cos(2*i);

if(t>6){t=0;}

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

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

context.beginPath();

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

context.fillStyle=colors[t];

context.fill();

if(i>6.3){j=-0.05;context.clearRect(0,0,400,300);}

if(i<0){j=0.05;context.clearRect(0,0,400,300);}

}

window.setInterval('timing()',200);

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠在瀏覽器窗口中看到七彩花瓣繪製動畫，如圖5所示。

圖5 七彩花瓣

相關標籤/搜索

每日一句

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