JavaScript圖形實例：像雪花一樣的Hexaflake分形

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

編寫如下的函數： function drawHexagon(x,y,L) { ctx.beginPath(); ctx.moveTo(x-sqrt3/2*L,y-L/2); ctx.lineTo(x-sqrt3/2*L,y+L/2); ctx.lineTo(x,y+L); ctx.lineTo(x+ ...


      編寫如下的函數：

   function drawHexagon(x,y,L)

   {

        ctx.beginPath();

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

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

        ctx.lineTo(x,y+L);

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

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

        ctx.lineTo(x,y-L);

        ctx.closePath();

        ctx.fillStyle = "#00FFFF";

        ctx.fill();

   }

      函數中sqrt3的值為Math.sqrt(3)。該函數的功能是：以坐標(x,y)為中心點，繪製一個邊長為L的正六邊形併進行填充，如圖1所示。

 

圖1 正六邊形

      編寫如下的調用語句：

   var x=250;

   var y=250;

   var L=200;

   drawHexagon(x,y-2*L/3,L/3);

   drawHexagon(x,y,L/3);

   drawHexagon(x,y+2*L/3,L/3);

   drawHexagon(x-sqrt3/3*L,y+L/3,L/3);

   drawHexagon(x-sqrt3/3*L,y-L/3,L/3);

   drawHexagon(x+sqrt3/3*L,y+L/3,L/3);

   drawHexagon(x+sqrt3/3*L,y-L/3,L/3);

      可以繪製出如圖2所示的7個小正六邊形，這7個小正六邊形正好填充在以(x,y)為中心邊長為L的大正六邊形中。

 

圖2  7個正六邊形組成的圖案

      Hexaflake分形圖案的構造過程是：以（x,y）為中心點繪製一個邊長為L的正六邊形併進行顏色填充；在這個正六邊形中找到7個點，以這7個點為中心分別繪製7個邊長為L/3的正六邊形併進行顏色填充，替換掉原來邊長為L的正六邊形；重覆以上操作直至達到要求的層數，可以繪製出Hexaflake分形圖案，如圖3所示。

圖3  Hexaflake分形圖案的生成

      Hexaflake分形採用遞歸過程易於實現，編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>Hexaflake分形</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 maxdepth =4;

   var sqrt3=Math.sqrt(3);

   function drawHexagon(x,y,L)

   {

        ctx.beginPath();

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

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

        ctx.lineTo(x,y+L);

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

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

        ctx.lineTo(x,y-L);

        ctx.closePath();

        ctx.fillStyle = "#00FFFF";

        ctx.fill();

   }

   function drawHexaflake(n,x,y,L)

   {

        if(n>0)

        {

            drawHexaflake(n-1,x,y-2*L/3,L/3);

            drawHexaflake(n-1,x,y,L/3);

            drawHexaflake(n-1,x,y+2*L/3,L/3);

            drawHexaflake(n-1,x-sqrt3/3*L,y+L/3,L/3);

            drawHexaflake(n-1,x-sqrt3/3*L,y-L/3,L/3);

            drawHexaflake(n-1,x+sqrt3/3*L,y+L/3,L/3);

            drawHexaflake(n-1,x+sqrt3/3*L,y-L/3,L/3);

        }

        else

            drawHexagon(x,y,L);

   }

   drawHexaflake(maxdepth,250,250,200);

</script>

</body>

</html>

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

圖4  遞歸深度maxdepth =4的Hexaflake分形

      執行語句：   ctx.fillStyle="black";

                           ctx.fillRect(0,0,500,500);

      將屏幕背景設置為黑色，將繪製的正六邊形用白色填充，則在瀏覽器視窗中繪製出的Hexaflake分形圖案像雪花兒一樣，如圖5所示。

圖5  像雪花一樣的Hexaflake分形

      將Hexaflake分形的生成過程進行動態展示，編寫如下的HTML文件。

<!DOCTYPE html>

<head>

<title>Hexaflake分形</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 depth =0;

   var sqrt3=Math.sqrt(3);

   function drawHexagon(x,y,L)

   {

        ctx.beginPath();

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

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

        ctx.lineTo(x,y+L);

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

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

        ctx.lineTo(x,y-L);

        ctx.closePath();

        ctx.fillStyle = "#FFFFFF";

        ctx.fill();

   }

   function drawHexaflake(n,x,y,L)

   {

        if(n>0)

        {

            drawHexaflake(n-1,x,y-2*L/3,L/3);

            drawHexaflake(n-1,x,y,L/3);

            drawHexaflake(n-1,x,y+2*L/3,L/3);

            drawHexaflake(n-1,x-sqrt3/3*L,y+L/3,L/3);

            drawHexaflake(n-1,x-sqrt3/3*L,y-L/3,L/3);

            drawHexaflake(n-1,x+sqrt3/3*L,y+L/3,L/3);

            drawHexaflake(n-1,x+sqrt3/3*L,y-L/3,L/3);

        }

        else

            drawHexagon(x,y,L);

   }

   function go()

   {

        ctx.fillStyle = "#000000";

        ctx.fillRect(0,0,500,500);  

        drawHexaflake(depth,250,250,200);

        depth++;

        if (depth>4)

        {

           depth=0;

        }

   }

   window.setInterval('go()',1500);

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，在瀏覽器視窗中呈現出如圖6所示的Hexaflake分形動態生成效果。

 

圖6  Hexaflake分形圖案動態生成


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

-Advertisement-
Play Games
更多相關文章
  • 如何從Bilibili下載視頻（3種方法）1080P高清視頻下載
    您聽說過bilibili嗎？如果您居住在中國或對宅男文化感興趣，那麼您可能會感興趣。對於那些不瞭解Bilibili的人來說，這是一個視頻共用網站。大部分視頻都位於中國，其主題是動畫，漫畫和游戲。 Bilibili是目前YouTube上最好的替代產品之一，如果您喜歡卡通漫畫，可以依靠它。您會在那找到超 ...
  • 前端開發，我有一些經驗想和你分享
    寫在前面 最近身邊有不少朋友想轉行去做前端開發，然後跑過來問我，向我瞭解前端崗位，以及給他們一些建議等等；他們有的還沒畢業，對於即將到來的社會毒打充滿著迷茫和不安，有的已經工作兩三年，突然覺得自己不合適當下這個份工作，想謀求一份別的職業。 選擇一份職業不在於這份職業可以給你帶來什麼，而是你可以因此成 ...
  • Canvas 基礎二
    一、繪製矩形 1、rect (x, y, width, height) : 繪製矩形的路徑 用軌跡畫的，不是獨立路徑( 沒有beginPath() ) 需要stroke()描邊才會顯示 2、strokeRect (x, y, width, height) : 描邊矩形 自動描邊，有獨立路徑 3、fi ...
  • 學Vue，就要學會vue JSX（大結局）
    只能在render函數裡面使用JSX嗎 當然不是，你可以定義method，然後在method裡面返回JSX,然後在render函數裡面調用這個方法，不僅如此，JSX還可以直接賦值給變數，比如下麵這段代碼 methods: { $_renderFooter() { return ( <div> <El ...
  • 學Vue，就要學會vue JSX（三）
    是時候使用JSX代替createElement了 接著上面的講，當我們看到上面用createElement去實現組件，太麻煩了，別說工作效率提高了，就是那些嵌套可以嵌套正確就很贊了，所以我們需要用JSX去簡化整個邏輯。當年我做項目的時候就遇到過這樣的情況，嵌套太多，自己都快搞不明白了，在崩潰的邊緣。 ...
  • 小白的前端之路-HTMl
    HTML——超文本標記語言 HTMl裡面有標簽，標簽又分為單標簽和雙標簽，也分為行級元素和塊級元素 標簽是用<>包裹起來的，而且必須要有<>，否則會直接顯示在瀏覽器上面哦 現在介紹一下常用標簽 我們還要區分行級元素和塊級元素，塊級元素的特點是獨占一行，可以設置寬高，行級元素不能設置寬高，如果需要設置 ...
  • 學Vue，就要學會vue JSX（二）
    學習JSX,先瞭解一下createElement 提到JSX,不可避免的就要提到createElement,當你看完本節，你會發現，奇怪的知識又增多了。ok，我們接著上一部分繼續講。這一次的準備工作是瞭解createElement。 從Vue編譯後的代碼看createElement 你是否看過寫的V ...
  • Web前端前景、最新技術、學習路線？
    1.前景怎麼樣？ web前端人才需求還會持續增加 據國內權威數據統計，未來五年，我國信息化人才總需求量高達1500萬—2000萬人。其中“網路工程”“UI設計”“web前端”等人才的缺口最為突出，所以2020年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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類