關於HTML5 Canvas旋轉動畫的2個例子-H5教程-PHP中文網

首頁

web前端

H5教程

關於HTML5 Canvas旋轉動畫的2個例子

不言

Jun 22, 2018 pm 03:07 PM

canvas html5 旋轉動畫

這篇文章主要介紹了HTML5 Canvas旋轉動畫的2個程式碼範例,實現了一個旋轉的太極圖效果,學習HTML5 Canvas旋轉動畫的朋友可以參考下

效果圖：
關於HTML5 Canvas旋轉動畫的2個例子

方法一：

<!DOCTYPE HTML> 

  <html> 

  <body> 

  <canvas id="myCanvas" width="500" height="500">your browser does not support the canvas tag</canvas> 

  <script type="text/javascript"> 

  var deg = 0; 

  var r = 30; 

  var rl = 100; 

  function drawTaiji() { 

  var canvas = document.getElementById(&#39;myCanvas&#39;); 

  var context = canvas.getContext(&#39;2d&#39;); 

  var colorA = "rgb(0, 0, 0)"; 

  var colorB = "red"; 

  var px =Math.sin(deg)*r; 

  var py =Math.cos(deg)*r; 

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

  context.beginPath(); 

  context.fillStyle = colorA; 

  context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorB; 

  context.beginPath(); 

  context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorB; 

  context.beginPath(); 

  context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorA; 

  context.beginPath(); 

  context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorA; 

  context.beginPath(); 

  context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true); 

  context.closePath(); 

  context.fill(); 

  context.fillStyle = colorB; 

  context.beginPath(); 

  context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true); 

  context.closePath(); 

  context.fill(); 

  deg +=0.1; 

  } 

  setInterval(drawTaiji, 100);

  </script> </p>
<p></body> 

  </html>

方法二：

<!DOCTYPE HTML> 

  <html> 

  <body> 

  <canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas> 

  <script type="text/javascript"> 

  var canvas = document.getElementById(&#39;myCanvas&#39;); 

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

  var angle = 0; 

  var count = 360; 

  var clrA = &#39;#000&#39;; 

  var clrB = &#39;red&#39;; 

  function taiji(x, y, radius, angle, wise) { 

  angleangle = angle || 0; 

  wisewise = wise ? 1 : -1; 

  ctx.save(); 

  ctx.translate(x, y); 

  ctx.rotate(angle); 

  ctx.fillStyle = clrA; 

  ctx.beginPath(); 

  ctx.arc(0, 0, radius, 0, Math.PI, true); 

  ctx.fill(); 

  ctx.beginPath(); 

  ctx.fillStyle = clrB; 

  ctx.arc(0, 0, radius, 0, Math.PI, false); 

  ctx.fill(); 

  ctx.fillStyle = clrB; 

  ctx.beginPath(); 

  ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true); 

  ctx.fill(); 

  ctx.beginPath(); 

  ctx.fillStyle = clrA; 

  ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false); 

  ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); 

  ctx.fill(); 

  ctx.beginPath(); 

  ctx.fillStyle = clrB; 

  ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); 

  ctx.fill(); 

  ctx.restore(); 

  } 

  loop = setInterval(function () { 

  beginTag = true; 

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

  taiji(200, 200, 50, Math.PI * (angle / count) * 2, true); 

  //taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false); 

  angle = (angle + 5) % count; 

  }, 50); 

  </script> </p>
<p></body> 

  </html>

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

熱AI工具

熱工具

熱門話題

Laravel 教程

1602

PHP教程

1504

276

Related knowledge

將CSS和JavaScript與HTML5結構有效整合。 Jul 12, 2025 am 03:01 AM

HTML5、CSS和JavaScript應通過語義化標籤、合理加載順序與解耦設計高效結合。 1.使用HTML5語義化標籤如、提升結構清晰度與可維護性，利於SEO和無障礙訪問；2.CSS應置於中，使用外部文件並按模塊拆分，避免內聯樣式與延遲加載問題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強依賴，通過data-*屬性驅動行為、類名控制狀態，統一命名規範提升協作效率。這些方法能有效優化頁面性能與團隊協作。

解釋html5` vs` '元素。 Jul 12, 2025 am 03:09 AM

是塊級元素，適合佈局；是內聯元素，適合包裹文字內容。 1.獨占一行，可設置寬高和邊距，常用於結構佈局；2.不換行，大小由內容決定，適用於局部文本樣式或動態操作；3.選擇時應根據內容是否需獨立空間判斷；4.不可嵌套在內，不適合做佈局；5.優先使用語義化標籤以提升結構清晰度與可訪問性。

了解HTML5媒體源擴展（MSE） Jul 08, 2025 am 02:31 AM

MSE（MediaSourceExtensions）是W3C標準的一部分，允許JavaScript動態構建媒體流，從而實現高級視頻播放功能。它通過MediaSource管理媒體源、SourceBuffer存放數據、TimeRanges表示緩衝時間範圍，使瀏覽器能動態加載並解碼視頻片段。使用MSE的流程包括：①創建MediaSource實例；②將其綁定到元素；③添加SourceBuffer接收特定格式數據；④通過fetch()獲取分段數據並追加至緩衝區。常見註意事項有：①格式兼容性問題；②時間戳對

HTML5表單中有哪些新輸入類型？ Jul 12, 2025 am 03:07 AM

HTML5introducednewinputtypesthatenhanceformfunctionalityanduserexperiencebyimprovingvalidation,UI,andmobilekeyboardlayouts.1.emailvalidatesemailaddressesandsupportsmultipleentries.2.urlchecksforvalidwebaddressesandtriggersURL-optimizedkeyboards.3.num

如何使用HTML5地理位置API訪問用戶的當前位置？ Jul 13, 2025 am 02:23 AM

要獲取用戶當前位置，可使用HTML5的GeolocationAPI。該API在用戶授權後提供經緯度等信息，核心方法是getCurrentPosition()，需處理成功與錯誤回調；同時要注意HTTPS前提、用戶授權機制及錯誤碼處理。 ①調用getCurrentPosition獲取一次位置，失敗則觸發錯誤回調；②用戶必須授權，否則無法獲取，且可能不再提示；③錯誤處理應區分拒絕、超時、位置不可用等情況；④啟用高精度、設置超時時間等可通過第三個參數配置；⑤線上環境必須使用HTTPS，否則可能被瀏覽器限制

使用新的HTML5方法（FormData）提交表單數據 Jul 08, 2025 am 02:28 AM

使用HTML5的FormDataAPI提交表單數據更方便，1.它可自動收集帶name屬性的表單字段或手動添加數據；2.支持通過fetch或XMLHttpRequest以multipart/form-data格式提交，適合文件上傳；3.處理文件時只需將文件附加到FormData並發送請求即可；4.注意同名字段會被覆蓋、需處理JSON轉換及無嵌套結構等問題。

說明HTML5中腳本的'異步”和' defer”屬性。 Jul 13, 2025 am 03:06 AM

async和defer的區別在於腳本執行時機。 async讓腳本並行下載且下載完立即執行，不保證執行順序；defer則在HTML解析完成後按順序執行腳本。兩者都避免阻塞HTML解析。使用async適用於獨立腳本如分析代碼；defer適合需訪問DOM或依賴其他腳本的場景。

如何在HTML5中使用無線電按鈕？ Jul 21, 2025 am 01:08 AM

在HTML5中使用單選按鈕的關鍵在於理解其工作原理並正確組織代碼結構。 1.每個radio按鈕的name屬性必須相同，以實現互斥選擇；2.使用label標籤提升可訪問性和點擊體驗；3.推薦將每個選項包裹在div或label中以增強結構清晰度和样式控制；4.通過checked屬性設置默認選中項；5.value值應簡潔有意義，便於表單提交處理；6.可通過CSS自定義樣式，但需確保功能正常。掌握這些要點能有效避免常見問題並提升使用效果。

See all articles

關於HTML5 Canvas旋轉動畫的2個例子

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題