JavaScript圖形實例：平面鑲嵌圖案

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

用形狀、大小完全相同的一種或幾種平面圖形進行拼接，彼此之間不留空隙、不重疊地鋪成一片，就叫做這幾種圖形的平面鑲嵌。 1．用一種多邊形實現的平面鑲嵌圖案 我們可以採用正三角形、正方形或正六邊形實現平面鑲嵌。 （1）用正方形平鋪。 用正方形進行平面鑲嵌比較簡單，編寫如下的HTML代碼。 <!DOCTYP ...


      用形狀、大小完全相同的一種或幾種平面圖形進行拼接，彼此之間不留空隙、不重疊地鋪成一片，就叫做這幾種圖形的平面鑲嵌。

1．用一種多邊形實現的平面鑲嵌圖案

      我們可以採用正三角形、正方形或正六邊形實現平面鑲嵌。

（1）用正方形平鋪。

用正方形進行平面鑲嵌比較簡單，編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>正方形平面鑲嵌圖案</title>

</head>

<body>

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

</canvas>

<script type="text/javascript">

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

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

   var color=['#00FFFF','#00FF00'];

   var L=50;

   for (k=0;k<10;k++)

   {

      y=k*L;

      x0=0;

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

      {

          x=x0+i*L;

          ctx.strokeStyle="black";

          ctx.strokeRect(x,y,L,L);

          ctx.fillStyle = color[(k+i)%2];

          ctx.fillRect(x,y,L,L);

      }

   }

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出如圖1所示的正方形平面鑲嵌圖案。

圖1 正方形平面鑲嵌圖案（一）

      將上述程式中的語句： x0=0; 改寫為：

      if (k%2==0) x0=0;

      else x0=-L/2;

      並將填充顏色改為單色填充，例如，ctx.fillStyle = "green";，則繪製出如圖2所示的正方形平面鑲嵌圖案。

圖2  正方形平面鑲嵌圖案（二）

（2）用正三角形平鋪。

用正三角形進行平面鑲嵌，編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>正三角形平面鑲嵌圖案</title>

</head>

<body>

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

</canvas>

<script type="text/javascript">

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

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

   var sqrt3=Math.sqrt(3);

   var color=['#00FFFF','#00FF00'];

   var L=50;

   for (k=0;k<13;k++)

   {

      if (k%2==0)

      {

         x0=-L;

      }        

      else

      {

         x0=-L/2;

      }

      y=k*sqrt3*L/2;

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

      {

          x=x0+i*L;

          ctx.strokeStyle="black";

          ctx.beginPath();

          ctx.moveTo(x,y);

          ctx.lineTo(x+L/2,y-sqrt3/2*L);

          ctx.lineTo(x+L,y);

          ctx.closePath();

          ctx.stroke();

          ctx.fillStyle=color[0];

          ctx.fill();

          ctx.beginPath();

          ctx.moveTo(x+L,y);

          ctx.lineTo(x+L/2,y-sqrt3/2*L);

          ctx.lineTo(x+3*L/2,y-sqrt3/2*L);

          ctx.closePath();

          ctx.fillStyle = color[1];

          ctx.stroke();

          ctx.fill();

      }

   }

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出如圖3所示的正三角形平面鑲嵌圖案。

 

圖3  正三角形平面鑲嵌圖案

（3）用正六邊形平鋪。

用正六邊形進行平面鑲嵌，編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>正六邊形平面鑲嵌圖案</title>

</head>

<body>

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

</canvas>

<script type="text/javascript">

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

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

   var sqrt3=Math.sqrt(3);

   var color=['#00FFFF','#00FF00','#FFFF00'];

   function drawHexagon(x,y,L,c)

   {

        ctx.beginPath();

        ctx.moveTo(x-L/2,y-sqrt3/2*L);

        ctx.lineTo(x+L/2,y-sqrt3/2*L);

        ctx.lineTo(x+L,y);

        ctx.lineTo(x+L/2,y+sqrt3/2*L);

        ctx.lineTo(x-L/2,y+sqrt3/2*L);

        ctx.lineTo(x-L,y);

        ctx.closePath();

        ctx.fillStyle = c;

        ctx.fill();

        ctx.strokeStyle="black";

        ctx.stroke();

   }

   var L=45;

   for (k=0;k<14;k++)

   {

      if (k%2==0)

      {

         x0=L;

      }        

      else

      {

         x0=-L/2;

      }

      y=k*sqrt3*L/2;

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

      {

          x=x0+i*3*L;

          drawHexagon(x,y,L,color[k%3]);

      }

   }

</script>

</body>

</html>

       在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出如圖4所示的正六邊形平面鑲嵌圖案。

圖4  正六邊形平面鑲嵌圖案

2．用幾種多邊形實現的平面鑲嵌圖案

      還可以用一種以上的多邊形來實現的平面鑲嵌。

       （1）正三角形和正方形組合平面鑲嵌。

       可以使用正三角形與正方形，通過組合後重覆排列的方式完成鑲嵌。編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>正三角形和正方形組合平面鑲嵌圖案</title>

</head>

<body>

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

</canvas>

<script type="text/javascript">

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

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

   var sqrt3=Math.sqrt(3);

   var color=['#00FFFF','#00FF00'];

   var L=50;

   var y=0;

   for (k=0;k<13;k++)

   {

      if (k%2==0)

      {

         x0=-L;

         y=y+sqrt3*L/2;

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

         {

            x=x0+i*L;

            ctx.strokeStyle="black";

            ctx.beginPath();

            ctx.moveTo(x,y);

            ctx.lineTo(x+L/2,y-sqrt3/2*L);

            ctx.lineTo(x+L,y);

            ctx.closePath();

            ctx.stroke();

            ctx.fillStyle=color[0];

            ctx.fill();

            ctx.beginPath();

            ctx.moveTo(x+L,y);

            ctx.lineTo(x+L/2,y-sqrt3/2*L);

            ctx.lineTo(x+3*L/2,y-sqrt3/2*L);

            ctx.closePath();

            ctx.fillStyle = color[1];

            ctx.stroke();

            ctx.fill();

         }

       }

       else

       {

         x0=0;

         y=y+L;

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

         {

            x=x0+2*i*L;

            ctx.strokeStyle="black";

            ctx.strokeRect(x,y-L,L,L);

            ctx.fillStyle=color[0];

            ctx.fillRect(x,y-L,L,L);

            ctx.strokeRect(x+L,y-L,L,L);

            ctx.fillRect(x+L,y-L,L,L);

         }

       }

   }

</script>

</body>

</html>

       在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出如圖5所示的正三角形和正方形組合平面鑲嵌圖案。

 

圖5  正三角形和正方形組合平面鑲嵌圖案

       （2）正六邊形與正三角形組合平面鑲嵌。

      可以使用正六邊形與正三角形，通過組合後重覆排列的方式完成鑲嵌。編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>正六邊形與正三角形組合平面鑲嵌圖案</title>

</head>

<body>

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

</canvas>

<script type="text/javascript">

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

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

   var sqrt3=Math.sqrt(3);

   var color=['#00FFFF','#00FF00'];

   function drawHexagon(x,y,L,c)

   {

        ctx.beginPath();

        ctx.moveTo(x-L/2,y-sqrt3/2*L);

        ctx.lineTo(x+L/2,y-sqrt3/2*L);

        ctx.lineTo(x+L,y);

        ctx.lineTo(x+L/2,y+sqrt3/2*L);

        ctx.lineTo(x-L/2,y+sqrt3/2*L);

        ctx.lineTo(x-L,y);

        ctx.closePath();

        ctx.fillStyle = c;

        ctx.fill();

        ctx.strokeStyle="black";

        ctx.stroke();

   }

   ctx.fillStyle="#FFFF00";

   ctx.fillRect(0,0,canvas.width,canvas.height);

   var L=45;

   for (k=0;k<7;k++)

   {

      if (k%2==0)

      {

         x0=L;

      }        

      else

      {

         x0=0;

      }

      y=k*sqrt3*L;

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

      {

          x=x0+i*2*L;

          drawHexagon(x,y,L,color[k%2]);

      }

   }

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出如圖6所示的正六邊形與正三角形組合平面鑲嵌圖案。

圖6  正六邊形與正三角形組合平面鑲嵌圖案

      （3）正八邊形組合正方形平面鑲嵌。

      可以使用正八邊形與正方形，通過組合後重覆排列的方式完成鑲嵌。編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>正八邊形組合正方形平面鑲嵌圖案</title>

</head>

<body>

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

</canvas>

<script type="text/javascript">

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

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

   var sqrt2=Math.sqrt(2);

   var color=['#00FFFF','#00FF00'];

   function drawOctagon(x,y,L,c)

   {

        ctx.beginPath();

        ctx.moveTo(x-L/2-sqrt2*L/2,y-L/2);

        ctx.lineTo(x-L/2-sqrt2*L/2,y+L/2);

        ctx.lineTo(x-L/2,y+L/2+sqrt2*L/2);

        ctx.lineTo(x+L/2,y+L/2+sqrt2*L/2);

        ctx.lineTo(x+L/2+sqrt2*L/2,y+L/2);

        ctx.lineTo(x+L/2+sqrt2*L/2,y-L/2);

        ctx.lineTo(x+L/2,y-L/2-sqrt2*L/2);

        ctx.lineTo(x-L/2,y-L/2-sqrt2*L/2);

        ctx.closePath();

        ctx.fillStyle = c;

        ctx.fill();

        ctx.strokeStyle="black";

        ctx.stroke();

   }

   ctx.fillStyle="#FFFF00";

   ctx.fillRect(0,0,canvas.width,canvas.height);

   var L=30;

   var y0=(sqrt2+1)*L/2;

   for (k=0;k<11;k++)

   {

      if (k%2==0)

      {

         x0=(sqrt2+1)*L/2;

      }        

      else

      {

         x0=-L/2;

      }

      y=y0+(k-1)*(sqrt2+2)*L/2;

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

      {

          x=x0+i*(2+sqrt2)*L;

          drawOctagon(x,y,L,color[k%2]);

      }

   }

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出如圖7所示的正八邊形組合正方形平面鑲嵌圖案。

 

圖7  正八邊形組合正方形平面鑲嵌圖案


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

-Advertisement-
Play Games
更多相關文章
  • 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許可權管理模塊管理的內容，介紹組織機構和角色管理模塊的處理，通過... ...
  • JavaScript圖形實例：阿基米德螺線
    1．阿基米德螺線 阿基米德螺線亦稱“等速螺線”。當一點P沿動射線OP以等速率運動的同時，該射線又以等角速度繞點O旋轉，點P的軌跡稱為“阿基米德螺線”。 阿基米德螺線的笛卡爾坐標方程式為： r=10*(1+t) x=r*cos(t * 360) y=r*sin(t *360) 編寫如下的HTML代碼。 ...
  • px和em，rem的區別
    1、px是相對長度單位，它是相對於顯示器屏幕解析度而言的。 優缺點：比較穩定和精確，但在瀏覽器中放大或縮放瀏覽頁面時會出現頁面混亂的情況。 2、em是相對長度單位，EM是相對於父元素來設計字體大小的。如果當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的預設字體尺寸。 優缺點：em的值並不是固定 ...
  • jQuery 實現DOM元素拖拽交換位置
    實現步驟 html + bootstrap 佈局畫3個面板。 註：面板樣式 position 屬性必須是絕對位置或者相對位置。 監聽面板的的 mousedown事件。 記錄當前對應面板的位置target_index，設置面板透明拖動。 監聽當前被拖動的面板的mousemove事件。 根據滑鼠移動的位 ...
  • 超級棒的170+款web前端開發工具彙總，千萬要收藏好！
    我們與企業內部的Web開發團隊進行了很多次交流，研究了很長時間，最後將Debug工具與Web前端開發工具整理彙總在了一起，這些工具對每個Web開發人員都非常有用。 這些工具將使您的工作更加輕鬆，特別是如果您是Web開發人員，Web設計人員或項目經理。您應該查看一下並嘗試一下。 不管您是網站開發人員還 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類