JavaScript動畫實例：曲線的繪製

時間 2020-07-16

原文原文鏈接

在「JavaScript圖形實例：曲線方程」一文中，咱們給出了15個曲線方程繪製圖形的實例。這些曲線都是根據其曲線方程，在[0,2π]區間取一系列角度值，根據給定角度值計算對應的各點座標，而後在計算出的座標位置描點，從而繪製出曲線。html

咱們能夠將曲線的繪製過程動態展現出來。canvas

例如，對於星形線的繪製，編寫以下的HTML代碼。瀏覽器

<!DOCTYPE>動畫

<html>spa

<head>3d

<title>星形線的繪製</title>orm

</head>htm

<body>blog

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

</canvas>

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

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

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

var theta=0;

var dig=Math.PI/256;

function motion()

{

ctx.beginPath();

var x = 80*Math.cos(theta)*Math.cos(theta)*Math.cos(theta)+150;

var y = 80*Math.sin(theta)*Math.sin(theta)*Math.sin(theta)+150;

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

ctx.closePath();

ctx.fillStyle = "red";

ctx.fill();

theta=theta+dig;

if (theta>2*Math.PI)

{

theta=0;

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

}

setInterval('motion()',20);

</script>

</body>

</html>

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

圖1 星形線的繪製

將上面程序中的語句

var x = 80*Math.cos(theta)*Math.cos(theta)*Math.cos(theta)+150;

var y = 80*Math.sin(theta)*Math.sin(theta)*Math.sin(theta)+150;

改寫爲：

x = 8*(16*Math.pow(Math.sin(theta),3))+150;

y= 150-8*(13*Math.cos(theta)-5*Math.cos(2*theta)-2*Math.cos(3*theta)-Math.cos(4*theta));

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

圖2 心型線的繪製

對於更多的曲線，都可以如同心型線同樣，根據其參數方程，適當修改座標位置（x,y）的計算語句便可。

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

<!DOCTYPE>

<html>

<head>

<title>曲線的繪製</title>

</head>

<body>

</canvas>

<input id="R5" name="spiral" type="radio" onclick="go()" />六瓣花型線<br/><br/>

</form>

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

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

var a=0;

function motion()

{

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

{

dig=Math.PI/128;

x = 80*Math.cos(a)*Math.cos(a)*Math.cos(a)+150;

y = 80*Math.sin(a)*Math.sin(a)*Math.sin(a)+150;

}

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

{

dig=Math.PI/128;

x = 8*(16*Math.pow(Math.sin(a),3))+150;

y= 150-8*(13*Math.cos(a)-5*Math.cos(2*a)-2*Math.cos(3*a)-Math.cos(4*a));

}

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

{

dig=Math.PI/400;

x=150+100 * Math.sin(4*a)*Math.cos(a);

y=150+100 * Math.sin(4*a)*Math.sin(a);

}

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

{

dig=Math.PI/720;

r=15*Math.cos(30*a)+12;

x = 150+5*r*Math.cos(a);

y = 150+5*r*Math.sin(a);

}

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

{

dig=Math.PI/512;

r=100*(1+Math.sin(18*a)/5)*(0.5+Math.sin(6*a)/2);

x=150+r*Math.cos(a);

y=150+r*Math.sin(a);

}

ctx.beginPath();

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

ctx.closePath();

ctx.fillStyle = "red";

ctx.fill();

a=a+dig;

if (a>2*Math.PI)

{

a=0;

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

}

function go()

{

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

a=0;

setInterval('motion()',30);

}

go();

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠在瀏覽器窗口中看到5種曲線繪製的動畫效果，如圖3所示。更多曲線的繪製，你們能夠根據選定的曲線方程自行添加相應代碼便可。

圖3 曲線繪製動畫

相關標籤/搜索

每日一句

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