JavaScript圖形實例：正弦曲線

時間 2019-12-25

標籤 javascript 圖形實例正弦曲線欄目 JavaScript 简体版

原文原文鏈接

正弦曲線的座標方程爲：javascript

Y=A*SIN(X) （A爲振幅）html

1．正弦曲線

在弧度爲0~4π的正弦曲線上取360個點，將這些點用線鏈接起來，能夠繪製出正弦曲線。編寫以下的HTML代碼。java

<!DOCTYPE html>canvas

<head>瀏覽器

<title>正弦曲線的繪製</title>函數

function draw(id)htm

{blog

var canvas=document.getElementById(id);ip

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;

var dig=Math.PI/90;

context.beginPath();

for (var x=0;x<360;x++)

{

y=150-120*Math.sin(x*dig);

if (x==0)

{

context.moveTo(x,y);

}

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

</body>

</html>

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

圖1 正弦曲線

若將上述文件中的語句「y=150-120*Math.sin(x*dig);」改成「y=150-120*Math.cos(x*dig);」，能夠繪製出如圖2所示的餘弦曲線。

圖2 餘弦曲線

2．正弦波

適當減少圖1中正弦函數的振幅，而且用循環繪製多條在Y軸方向上向下平移若干單位的正弦曲線，能夠繪製出正弦波形圖案。編寫以下的HTML文件。

<!DOCTYPE html>

<head>

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;

var dig=Math.PI/90;

context.beginPath();

for (py=40;py<=200;py+=5)

for (var x=0;x<360;x++)

{

y=py-15*Math.sin(x*dig-dig*(py-40)/2); // 正弦函數的相位進行變化

if (x==0)

{

context.moveTo(x,y);

}

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出正弦波形，如圖3所示。

圖3 正弦波形

3．合成正弦波形

若將正弦函數進行合成，例如取 Y=A*SIN(3X)*SIN(X)，能夠繪製出合成正弦波圖案。

編寫的HTML代碼以下。

<!DOCTYPE html>

<head>

<title>合成正弦波</title>

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;

var dig=Math.PI/90;

context.beginPath();

for (py=40;py<=200;py+=5)

for (var x=0;x<360;x++)

{

y=py-15*Math.sin(3*x*dig)*Math.sin(x*dig-dig*(py-40)/2);

if (x==0)

{

context.moveTo(x,y);

}

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出合成正弦波圖案，如圖4所示。

圖4 合成正弦波

4．端點按三角函數規律變化的線段

將線段的端點按三角函數規律變化，可繪製圖形。例如，將線段的一個端點取自正弦曲線，另外一個端點取自對應的餘弦曲線，能夠編寫HTML文件以下。

<!DOCTYPE html>

<head>

<title>端點按三角函數規律變化的線段</title>

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="blue";

context.lineWidth=1;

var dig=Math.PI/90;

context.beginPath();

context.moveTo(0,150);

for (var i=0;i<360;i++)

{

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

context.lineTo(i,y);

}

context.stroke();

context.strokeStyle="red";

context.lineWidth=2;

context.beginPath();

for (var i=0;i<360;i+=5)

{

x=150-120*Math.sin(i*dig);

y=150-120*Math.cos(i*dig);

context.moveTo(i,x);

context.lineTo(i,y);

}

context.stroke();

}

</script>

</head>

</body>

</html>

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

圖5 端點按三角函數規律變化的線段

將圖5中繪製的線段按規律進行着色，並適當改變線段端點的三角函數計算方法。編寫以下的HTML文件。

<!DOCTYPE html>

<head>

function draw(id)

{

var colors = ['red','orange', 'yellow', 'green', 'cyan','blue', 'purple' ];

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,600,200);

context.lineWidth=3;

var dig=Math.PI/150

for (var i=0;i<600;i+=4)

{

y1=100-80*Math.cos(i*dig);

y2=120-75*Math.sin(i*dig-Math.PI/2);

context.beginPath();

context.moveTo(i,y1);

context.lineTo(i+20,y2);

context.closePath();

context.strokeStyle=colors[(i/4)%7];

context.stroke();

}

</script>

</head>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖6所示的綵帶圖案。

圖6 綵帶

繼續仿照圖5線段圖形繪製的方法，咱們適當構造線段端點位置計算的三角函數，能夠繪製出飄逸的絲帶圖案。編寫以下的HTML文件。

<!DOCTYPE html>

<head>

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=1;

context.beginPath();

for (i=0;i<=180;i++)

{

a=i*Math.PI/360;

x1=200+180*Math.cos(1.5*a);

x2=200+180*Math.cos(2*a);

y1=150+120*Math.sin(7*a)*Math.cos(a/2.5);

y2=y1;

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖7所示的絲帶圖案1。

圖7 絲帶圖案1

改變繪製圖7的HTML文件中的線段端點計算函數，編寫以下的HTML文件。

<!DOCTYPE html>

<head>

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=1;

context.beginPath();

for (i=0;i<=300;i++)

{

a=i*Math.PI/120;

x1=200+180*Math.cos(0.5*a);

x2=200+180*Math.cos(0.5*a+Math.PI/4);

y1=150+(50-80*Math.sin(2.5*a))*Math.cos(a/2.5);

y2=150+(50-80*Math.sin(2.5*a-Math.PI/4))*Math.cos(a/2.5);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖8所示的絲帶圖案2。

圖8 絲帶圖案2

相關標籤/搜索

每日一句

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