JavaScript圖形實例：阿基米德螺線

来源:https://www.cnblogs.com/cs-whut/archive/2020/07/14/13298377.html
-Advertisement-
Play Games

1．阿基米德螺線 阿基米德螺線亦稱“等速螺線”。當一點P沿動射線OP以等速率運動的同時，該射線又以等角速度繞點O旋轉，點P的軌跡稱為“阿基米德螺線”。 阿基米德螺線的笛卡爾坐標方程式為： r=10*(1+t) x=r*cos(t * 360) y=r*sin(t *360) 編寫如下的HTML代碼。 ...


1．阿基米德螺線

      阿基米德螺線亦稱“等速螺線”。當一點P沿動射線OP以等速率運動的同時，該射線又以等角速度繞點O旋轉，點P的軌跡稱為“阿基米德螺線”。

      阿基米德螺線的笛卡爾坐標方程式為：

r=10*(1+t)

x=r*cos(t * 360)

y=r*sin(t *360)

編寫如下的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,300,300);

     context.strokeStyle="red";

     context.lineWidth=2;

     var dig=Math.PI/32;

     context.beginPath();

     context.moveTo(150,150);

     for (var i=1;i<=256;i++)

     {

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

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

        context.lineTo(x,y);

     }

     context.stroke();

   }

</script>

</head>

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

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

</body>

</html>

      將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出一條阿基米德螺線，如圖1所示。

圖1  阿基米德螺線

2．李薩如曲線

      一個質點同時在X軸和Y軸上作簡諧運動形成的圖形就是李薩如曲線。

李薩如曲線上的每一個點都可以用如下的公式進行表示：

X=A1sin(ω1t+ψ1)

Y=A2sin(ω2t+ψ2)

為繪製李薩如曲線，編寫如下的HTML文件。

在程式中，設定 X=R*SIN(n*θ)，Y= R*SIN(k*θ)  （0≤θ≤2π）

<!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,450,450);

     context.strokeStyle="red";

     context.lineWidth=1;

     var dig=Math.PI/64;

     context.beginPath();

     n=0;

     b=30;

     for (py=50;py<=450;py+=70)

     {

         n=n+1;  k=0;  

         for (px=50;px<=450;px+=70)

         {

           k++; 

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

           {

              x=px+b*Math.sin(n*i*dig);

              y=py-b*Math.sin(k*i*dig);

              if (i==0)

              {

                context.moveTo(x,y);

                bx=x;  by=y;

              }

              else

                context.lineTo(x,y);

           }

           context.lineTo(bx,by);

           context.closePath();

           context.fill();

           context.stroke();

        }

     }

   }

</script>

</head>

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

<canvas id="myCanvas" width="450" height="450"></canvas>

</body>

</html>

      將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出6種李薩如曲線，如圖2所示。

圖2  李薩如曲線

      由圖2看出，當n=1，k=1時，李薩如曲線為一條直線。如果在Y坐標計算時加上一個相位，如修改為“y=py-b*Math.sin(k*i*dig+Math.PI/4);”，則繪製的李薩如曲線如圖3所示。

圖3 李薩如曲線

3．可設置參數的李薩如曲線

      設李薩如曲線上的點（x,y）計算式為：

X=A1sin(mθ)

Y=A2sin(nθ) （0≤θ≤2π）

我們可以設置不同的參數A1、A2、m、n，繪製出不同的李薩如曲線。

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

     context.strokeStyle="red";

     context.lineWidth=1;

     var dig=Math.PI/64;

     context.beginPath();

     var a1=eval(document.myForm.A1.value);

     var a2=eval(document.myForm.A2.value);

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

     var m=eval(document.myForm.M.value);

     px=150;   py=150;

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

     {

          x=px+a1*Math.sin(m*i*dig);

          y=py-a2*Math.sin(n*i*dig);

          if (i==0)

          {

                context.moveTo(x,y);

                bx=x;  by=y;

          }

          else

                context.lineTo(x,y);

      }

      context.lineTo(bx,by);

      context.closePath();

      context.stroke();

    }

</script>

</head>

<body>

<form name="myForm">李薩如曲線上的點（x,y）計算式為：<br>

X=A1sin(mθ) <br> Y=A2sin(nθ)   （0≤θ≤2π） <br>

A1<input type=number name="A1" value=100 size=3>

A2<input type=number name="A2" value=100 size=3><br>

M&nbsp;&nbsp;<input type=number name="M" value=3 size=3>

N&nbsp;&nbsp;<input type=number name="N" value=5 size=3>

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

</form><br>

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

</canvas>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中，設置相應的參數後，單擊“確定”按鈕，可繪製出相應的李薩如曲線，如圖4所示。

圖4  李薩如曲線

4．由李薩如曲線構成的螺線

      在0~6π的螺線上取72個點，在這72個點的位置繪製72個李薩如曲線，並且李薩如曲線隨著R值的變大而逐漸變大。編寫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,500,300);

     context.strokeStyle="red";

     context.lineWidth=2;

     var r=0;

     for (var i=0;i<6*Math.PI;i+=Math.PI/12)

     {

        r+=3;

        px=265+(r+40)*Math.sin(i);

        py=150+(r/2+25)*Math.cos(i);

        var dig=Math.PI/64;

        context.beginPath();

        for (var j=0;j<=128;j++)

        {

           x=px+r/7*Math.sin(j*dig);

           y=py-r/14*Math.sin(j*dig+Math.PI/5);

           if (j==0)

           {

                context.moveTo(x,y);

                bx=x;  by=y;

           }

           else

                context.lineTo(x,y);

        }

        context.lineTo(bx,by);

        context.closePath();

        context.stroke();

     }

   }

</script>

</head>

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

<canvas id="myCanvas" width="500" height="300"></canvas>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出如圖5所示的由李薩如曲線構成的螺線圖案。

 

圖5  由李薩如曲線構成的螺線


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android連載25-強制下線具體實現
    一、回顧 上次連載寫了兩個類，一個類ActivityCollector.java用於管理所有的活動；一個類是BaseActivity.java作為所有活動的父類； 還有一個放在layout目錄中的登錄界面login.xml 二、登錄頁面的活動 接下來寫一個登錄頁面的活動，繼承自BaseActivit ...
  • 前端 引用svg圖片，支持動態切換顏色
    當我們添加一張svg圖片顯示時，react提示找不到文件。 我們可以在全局文件global.d.ts內，添加圖片類型的聲明： 詳見《TypeScript 引用資源文件後提示找不到的錯誤處理方案》 聲明之後，引用不報錯了。然後我們看看svg圖片，裡面有顏色及其它設置： 1 <?xml version= ...
  • 改造 layui 表格組件實現多重排序
    layui 的表格組件目前只支持單列排序，在實際應用中並不能很好的支撐我們的業務需求。今天一時手癢，決定改造一番以支持多重排序。 實現思路也比較簡單，只需要用一個數組來存放所有排序的列，再把這個數組傳到後端（後端排序）進行排序即可。沿用一般的使用習慣，按住 shift 鍵點擊表頭可增加排序列，按住 ...
  • JavaScript動畫實例：螺旋線
    數學中有各式各樣富含詩意的曲線，螺旋線就是其中比較特別的一類。螺旋線這個名詞來源於希臘文，它的原意是“旋捲”或“纏捲”。例如，平面螺旋便是以一個固定點開始向外逐圈旋繞而形成的曲線。在2000多年以前，古希臘數學家阿基米德就對螺旋線進行了研究。著名數學家笛卡爾於1683年首先描述了對數螺旋線，並且列出 ...
  • css設置文字思源雅黑，分為medium, regular, light
    html引入思源黑體 通過Link標簽在網頁頭部引用Google Web Font: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"> ...
  • 前端還在切圖？學完這些css，再也不用切圖了！
    標題開個玩笑，實際上CSS3有許多亮眼的特性，比如陰影shadow、動畫animation、形變transform、漸變gradient、濾鏡filter等，合理運用這些特性，可以實現許多高大上的效果。如果覺得有用請點個贊或者收藏。 三角形 利用border-color支持transparent這一 ...
  • 在大廠工作5年的大神,給前端初學者的四大建議
    現在的前端技術的發展日新月異，各種新技術層出不窮。 前後端分離的開發模式也讓前端開發者的地位日益提升，待遇日漸水漲船高，自然有很多小伙伴慕名入了前端開發的坑，希望能在前端領域大展巨集圖。 但一個殘酷的現實是 市場上從不缺少初級前端開發，稀缺的的永遠是高級前端開發 。物以稀為貴，一名高級前端開發的薪資是 ...
  • 循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理
    在前面隨筆《循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理》中介紹了用戶管理模塊的內容，包括用戶列表的展示，各種查看、編輯、新增對話框的界面處理和後臺數據處理操作，本篇隨筆繼續深化Vue + Element許可權管理模塊管理的內容，介紹組織機構和角色管理模塊的處理，通過... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類