在“JavaScript圖形實例：曲線方程”一文中，我們給出了15個曲線方程繪制圖形的實例。這些曲線都是根據(jù)其曲線方程，在[0,2π]區(qū)間取一系列角度值，根據(jù)給定角度值計算對應的各點坐標，然后在計算出的坐標位置描點，從而繪制出曲線。
我們可以將曲線的繪制過程動態(tài)展示出來。
例如，對于星形線的繪制，編寫如下的HTML代碼。
<!DOCTYPE>
<html>
<head>
<title>星形線的繪制</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">
</canvas>
<script>
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文件，可以在瀏覽器窗口中看到星形線的動態(tài)繪制過程，如圖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所示的心型線的動態(tài)繪制過程。
圖2 心型線的繪制
對于更多的曲線，均可以如同心型線一樣，根據(jù)其參數(shù)方程，適當修改坐標位置（x,y）的計算語句即可。
為此，編寫如下的HTML代碼。
<!DOCTYPE>
<html>
<head>
<title>曲線的繪制</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="float:left;border:3px double #996633;">
</canvas>
<form><br/>
<input id="R1" name="spiral" type="radio" checked onclick="go()" />星形線<br/><br/>
<input id="R2" name="spiral" type="radio" onclick="go()" />心型線<br/><br/>
<input id="R3" name="spiral" type="radio" onclick="go()" />玫瑰線<br/><br/>
<input id="R4" name="spiral" type="radio" onclick="go()" />太陽線<br/><br/>
<input id="R5" name="spiral" type="radio" onclick="go()" />六瓣花型線<br/><br/>
</form>
<script>
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所示。更多曲線的繪制，大家可以根據(jù)選定的曲線方程自行添加相應代碼即可。
圖3 曲線繪制動畫
聯(lián)系客服
