JavaScript動畫實例：旋轉的正三角形

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

給定一個正三角形的重心坐標為（x0,y0），高為h，可以用如下的語句繪製一個底邊水平的正三角形。 ctx.beginPath(); ctx.moveTo(x0,y0-h*2/3); ctx.lineTo(x0+h/Math.sqrt(3), y0+h/3); ctx.lineTo(x0-h/Math ...


      給定一個正三角形的重心坐標為（x0,y0），高為h，可以用如下的語句繪製一個底邊水平的正三角形。

         ctx.beginPath();

         ctx.moveTo(x0,y0-h*2/3);

         ctx.lineTo(x0+h/Math.sqrt(3), y0+h/3); 

         ctx.lineTo(x0-h/Math.sqrt(3), y0+h/3);

         ctx.lineTo(x0,y0-h*2/3);

         ctx.closePath();

         ctx.stroke();

      給定正三角形個數count，通過迴圈的方式可以繪製出count個重心相同、高度不同正三角形。編寫如下的HTML代碼。

<!DOCTYPE html>

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

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

   var height=360;

   var x0=250;

   var y0=(500-height)/2-(height/7)+(height*2/3);

   var count=4;

   ctx.lineWidth=1;

   ctx.fillStyle="#FF3388";

   ctx.strokeStyle="#FFFFFF";

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

   {

         var nHeight = height-(height/count)*i;

         ctx.beginPath();

         ctx.moveTo(x0,y0-nHeight*2/3);

         ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3); 

         ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

         ctx.lineTo(x0,y0-nHeight*2/3);

         ctx.closePath();

         ctx.stroke();

         ctx.fill();

   };

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中繪製出如圖1所示的4個重心相同高度不同的正三角形。

圖1  4個重心相同高度不同的正三角形

      若將圖1中除最外層的三角形固定不動外，其餘的3個正三角形繞重心進行旋轉，會產生怎樣的效果呢？

編寫如下的HTML代碼。

<!DOCTYPE html>

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

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

   var height=360;

   var x0=250;

   var y0=(500-height)/2-(height/7)+(height*2/3);

   var count=4;

   var speed=2;

   ctx.lineWidth=1;

   ctx.fillStyle="#FF3388";

   ctx.strokeStyle="#FFFFFF";

   var j = 0;

   function draw()

   {

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

      ctx.save();

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

      {

         var nHeight = height-(height/count)*i;

         ctx.translate(x0,y0);

         ctx.rotate(i*j/(80*speed));

         ctx.translate(-x0,-y0);

         ctx.beginPath();

         ctx.moveTo(x0,y0-nHeight*2/3);

         ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3); 

         ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

         ctx.lineTo(x0,y0-nHeight*2/3);

         ctx.closePath();

         ctx.stroke();

         ctx.fill();

      };

      ctx.restore();

      j++;

      if (j>100000)  j=0;

   }

   function move()

   {

      draw();

      requestAnimationFrame(move);

   }

   move();

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中呈現出如圖2所示重心相同高度不同的正三角形繞重心旋轉的動畫效果。

 

圖2  正三角形繞重心旋轉效果（一）

      若將上面程式中語句“var speed=2;”改寫為“var speed=-2;”，其餘部分保持不變，則正三角形會逆時針旋轉，如圖3所示。

 

圖3  正三角形繞重心旋轉效果（二）

      若將增加旋轉的三角形的個數並適當調低旋轉速度的級別，即修改語句：

      “var count=4;    var speed=2;”   為  “var count=20;    var speed=12;”，其餘部分保持不變，則在畫布中呈現出如圖4所示的正三角形旋轉效果。

 

圖4  正三角形繞重心旋轉效果（三）

       由圖2、3或4可以看出，正三角形繞重心旋轉時，越小的三角形旋轉得越快。若將所有的正三角形都用同一種角速度進行旋轉，即簡單地修改語句 “ctx.rotate(i*j/(80*speed));”為“ctx.rotate(j/(80*speed));”，則在畫布中呈現出如圖5所示的正三角形旋轉效果。

 

圖5  正三角形繞重心旋轉效果（四）

       若為旋轉的正三角形設置裁切區域，使得旋轉超出最外層三角形的部分均不可見。編寫如下的HTML文件。

<!DOCTYPE html>

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

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

   var height=360;

   var x0=250;

   var y0=(500-height)/2-(height/7)+(height*2/3);

   var count=24;

   var speed=18;

   ctx.lineWidth=2;

   ctx.fillStyle="#FF3388";

   ctx.strokeStyle="#FFFFFF";

   var j = 0;

   function draw()

   {

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

      ctx.save();

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

      {

         var nHeight = height-(height/count)*i;

         ctx.beginPath();

         ctx.moveTo(x0,y0-nHeight*2/3);

         ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3); 

         ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

         ctx.lineTo(x0,y0-nHeight*2/3);

         ctx.closePath();

         ctx.clip();

         ctx.translate(x0,y0);

         ctx.rotate(i*j/(80*speed));

         ctx.translate(-x0,-y0);

         ctx.beginPath();

         ctx.moveTo(x0,y0-nHeight*2/3);

         ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3); 

         ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

         ctx.lineTo(x0,y0-nHeight*2/3);

         ctx.closePath();

         ctx.stroke();

         ctx.fill();

      };

      ctx.restore();

      j++;

      if (j>1000)  j=0;

   }

   function move()

   {

      draw();

      requestAnimationFrame(move);

   }

   move();

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器視窗中呈現出如圖6所示旋轉效果。

 

圖6  正三角形內的旋轉


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

-Advertisement-
Play Games
更多相關文章
  • Flutter Weekly Issue 64
    教程 必讀 | 深入理解佈局約束 插件 elastic-widgets Set of Flutter widgets built using physics based animations. timeago.dart A library useful for creating fuzzy time ...
  • JS寄快遞地址智能解析
    JS寄快遞地址智能解析——2020年7月15日 去年做了些前端內容，最近在整理一些稍微有點用的內容，比如智能解析地址，用戶只要輸入：張三1351111111江蘇省揚州市廣陵區XX小區X樓xxx室,就能解析出 姓名、電話、省市區、地址信息了。是不是很方便？ 項目地址暫時沒有放，大家可以關註我的個人碼雲 ...
  • 小火箭返回頂部
    網頁中常常會有一個 返回頂部的功能，恰巧我這天寫到了，在網上找了一下思路，下麵就寫了一個案例： 效果預覽：https://li_shang_shan.gitee.io/small_rocket_back_to_top。 代碼就直接粘貼了： <html> <head> <meta charset="u ...
  • 詳解JS中定時器setInterval和setTImeout的this指向問題
    詳解JS中定時器setInterval和setTImeout的this指向問題 ...
  • jQuery加PHP實現圖片上傳並提交
    圖片上傳思路：通過ajax實現圖片上傳，然後把PHP返回的圖片地址，加入到隱藏欄位中，最後通過表單提交給後臺PHP，代碼如下 HTML代碼 zimg.html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met ...
  • 循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及許可權控制
    在一個業務管理系統中，如果我們需要實現許可權控制功能，我們需要定義好對應的許可權功能點，然後在界面中對界面元素的功能點進行綁定，這樣就可以在後臺動態分配許可權進行動態控制了，一般來說，許可權功能點是針對角色進行控制的，也就是簡稱RBAC（Role Based Access Control）。在前面隨筆中，我... ...
  • 面試了幾個前端，給爺整哭了！
    長沙這邊面試了幾個三年的前端，給我整哭了， 簡歷簡歷不帶，問點基礎題，一問三不知， 問個水平垂直居中佈局，支支吾吾半天說不出來， 還有個弟弟說你這樣問我不知道怎麼回答，累了。 我只想說，這真的有三年的經驗嘛？ 如果有收穫？希望老鐵們來個三連，點贊、收藏、轉發 創作不易，別忘點個贊，可以讓更多的人看到 ...
  • Node.js 蠶食計劃（六）—— MongoDB + Koa 入門
    一、安裝 MongoDB 1. 在 Windows 環境下安裝： // Windows 7 / Server 2008 R2 以上的版本 打開官網鏈接 https://www.mongodb.com/try/download/community 在頁面中依次選擇 On-Premises => Mon ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類