JavaScript圖形實例：四瓣花型圖案

時間  2019-12-20
標籤 javascript 圖形 實例 瓣花 圖案 欄目 JavaScript 简体版
原文   原文鏈接

       設有座標計算公式以下：javascript

             X=L*(1+SIN(4α))*COS(α)html

            Y=L*(1+SIN(4α))*SIN(α)java

        用循環依次取α值爲0~2π，計算出X和Y,在canvas畫布中對座標位置（X,Y）描點，可繪製出一個曲線圖形。編寫HTML文件內容以下：canvas

<!DOCTYPE html>瀏覽器

<head>函數

<title>曲線圖形</title>3d

<script type="text/javascript">orm

  function draw(id)htm

  {blog

     var canvas=document.getElementById(id);

     if (canvas==null)

        return false;

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

     context.fillStyle="#EEEEFF";

     context.fillRect(0,0,400,300);

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

     {

         a=i*Math.PI/360;

         e=80*(1+Math.sin(4*a));

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

         y1=150+e*Math.sin(a);

         context.fillText('.',x1,y1);

         context.fillStyle="red";

     }

  }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

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

 

圖1  用三角函數繪製曲線

1．四瓣花型圖案

        先在HTML頁面中設置一個畫布。

         <canvas id="myCanvas" width="400" height="300">

        </canvas>

        再在定義的這塊400*300的canvas（畫布）上面用循環（0~2π）繪製四瓣花型圖案。

繪製圖案的基本思想是：

設立座標計算公式以下：

X1=L*(1+SIN(4α))*COS(α)

Y1=L*(1+SIN(4α))*SIN(α)

X2=L*(1+SIN(4α))*COS(α+π/5)

Y2=L*(1+SIN(4α))*SIN(α+π/5)

以（X1,Y1）和（X2,Y2）做爲端點座標繪製直線段。

可編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

<title>四瓣花型圖案</title>

<script type="text/javascript">

  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<=720;i++)

     {

         a=i*Math.PI/360;

         e=80*(1+Math.sin(4*a));

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

         x2=200+e*Math.cos(a+Math.PI/5);

         y1=150+e*Math.sin(a);

         y2=150+e*Math.sin(a+Math.PI/5);

         context.moveTo(x1,y1);

         context.lineTo(x2,y2);

     }

     context.closePath();

     context.stroke();

  }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖2所示的四瓣花型圖案。

  

圖2  四瓣花型圖案

        在上面的代碼中語句「e=80*(1+Math.sin(4*a));」中的4表示繪製四瓣花型圖案，若將4改寫爲3~8之間的任一整數，能夠畫出3~8瓣花型圖案，如圖3所示。

 

圖3  3瓣花型、5瓣花型、6瓣花型圖案

2．瓣頂有折皺的四瓣花型圖案

        咱們能夠給繪製的花瓣圖案加上變形係數，即把前面的代碼中的語句「e=80*(1+Math.sin(4*a));」改寫爲「e=80*(1+Math.sin(12*a));」。完整的HTML代碼以下。

<!DOCTYPE html>

<head>

<title>瓣頂有折皺的四瓣花型圖案</title>

<script type="text/javascript">

  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<=720;i++)

     {

         a=i*Math.PI/360;

         e=80*(1+Math.sin(12*a)/4);

         f=e*(1+Math.sin(4*a));

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

         x2=200+f*Math.cos(a+Math.PI/5);

         y1=150-f*Math.sin(a);

         y2=150-f*Math.sin(a+Math.PI/5);

         context.moveTo(x1,y1);

         context.lineTo(x2,y2);

     }

     context.closePath();

     context.stroke();

  }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖4所示的瓣頂有折皺的四瓣花型圖案。

 

圖4  瓣頂有折皺的四瓣花型圖案

        將上面JavaScript代碼中的語句「e=80*(1+Math.sin(12*a)/4);」改寫爲「e=80*(1+Math.cos(12*a)/4);」即SIN函數改用COS函數，將在瀏覽器窗口中繪製出如圖5所示的變形四瓣花型圖案1。

 

圖5  變形的四瓣花型圖案1

        若再將JavScript代碼中的

        語句「y1=150-f*Math.sin(a);」改寫爲「y1=150-f*Math.sin(a)/2;」，

        語句「y2=150-f*Math.sin(a+Math.PI/5);」改寫爲「y2=150-f*Math.sin(a+Math.PI/5)/2;」，即圖形的垂直方向上壓縮一半，將在瀏覽器窗口中繪製出如圖6所示的變形四瓣花型圖案2。

 

圖6  變形的四瓣花型圖案2

3．可設置參數的變形的多瓣花型圖案

        從上面的程序運行示例能夠看出，繪製花瓣圖案時，能夠設置花瓣數，還能夠設置花瓣的變形係數。咱們能夠經過在瀏覽器窗口的頁面中輸入相應參數值，而後單擊「肯定」按鈕繪製花瓣圖案。編寫的HTML文件以下。

<!DOCTYPE html>

<head>

<title>可設置參數的變形的多瓣花型圖案</title>

<script type="text/javascript">

  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();

     var n=eval(document.myForm.petalNum.value);

     var k=eval(document.myForm.shape.value);

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

     {

         a=i*Math.PI/360;

         e=80*(1+Math.sin(n*k*a)/4);

         f=e*(1+Math.sin(n*a));

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

         x2=200+f*Math.cos(a+Math.PI/5);

         y1=150-f*Math.sin(a);

         y2=150-f*Math.sin(a+Math.PI/5);

         context.moveTo(x1,y1);

         context.lineTo(x2,y2);

     }

     context.closePath();

     context.stroke();

  }

</script>

</head>

<body>

<form name="myForm">

花瓣數<input type=number name="petalNum" value=4 size=3>

變形係數：<input type=number name="shape" value=1 size=3>

<input type=button value="肯定" onClick="draw('myCanvas');">

</form><br>

<canvas id="myCanvas" width="500" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        在瀏覽器中打開包含這段HTML代碼的html文件，在表單的「花瓣數」數字框中輸入「4」，「變形係數」數字框中輸入「2」，單擊「肯定」按鈕，能夠看到在瀏覽器窗口中繪製出如圖7所示的變形四瓣花型圖案3。若在表單的「花瓣數」數字框中輸入「5」，「變形係數」數字框中輸入「3」，單擊「肯定」按鈕，能夠看到在瀏覽器窗口中繪製出如圖8所示的變形五瓣花型圖案。

 

圖7  變形的四瓣花型圖案3 

 

圖8 變形的五瓣花型圖案

4．其它變形的四瓣花型圖案

        實際上，咱們還能夠修改程序中變量e、f的計算表達式，繪製出更另類的四瓣花型圖案。例如，能夠編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

<title>其它變形的四瓣花型圖案</title>

<script type="text/javascript">

  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<=720;i++)

     {

         a=i*Math.PI/360;

         e=80*(1+Math.cos(12*a)/3);

         f=e*(1+Math.sin(4*a)*3/7);

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

         x2=200+f*Math.cos(a+Math.PI/3);

         y1=150-f*Math.sin(a);

         y2=150-f*Math.sin(a+Math.PI/3);

         context.moveTo(x1,y1);

         context.lineTo(x2,y2);

     }

     context.closePath();

     context.stroke();

  }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖9所示的另類變形的四瓣花型圖案。

 

圖9  另類變形的四瓣花型圖案

5．四瓣花型圖案繪製過程的動態展現

        咱們能夠將四瓣花型圖案繪製過程進行動態展現，編寫HTML文件以下。

<!DOCTYPE html>

<head>

<title>四瓣花型圖案繪製過程的動態展現</title>

<script type="text/javascript">

   var context;

   var n;

   function draw(id)

   {

      var canvas = document.getElementById(id); 

      if (canvas == null) 

        return false; 

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

      context.fillStyle="#EEEEFF";

      context.fillRect(0,0,400,300);

      n=0;

      setInterval(go,50);     

   }

   function go()

   {   

      n=n+1;

      if (n>720)

      {

         n=0;

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

      }

      context.strokeStyle="red";

      context.lineWidth=1;

      context.beginPath();

      a=n*Math.PI/360;

      e=80*(1+Math.sin(4*a));

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

      x2=200+e*Math.cos(a+Math.PI/5);

      y1=150+e*Math.sin(a);

      y2=150+e*Math.sin(a+Math.PI/5);

      context.moveTo(x1,y1);

      context.lineTo(x2,y2);

      context.closePath();

      context.stroke();

   }

</script>

</head>

<body onload="draw('myCanvas');">

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

</body>

</html>

        在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中看到四瓣花型圖案的動態繪製過程。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程