資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML5 中有哪些免費的 Canvas 庫？
使用指令碼，canvas 元素用於即時建立圖形（通常是 JavaScript）。此標籤只是在 HTML5 中引入的。
<canvas> 元素僅充當影像的佔位符。要繪製視覺效果，必須使用指令碼。有許多方法可以在畫布上繪製路徑、框、圓形、字元以及新增影像。
語法
<canvas id="canvas name"></canvas>
這是一個簡單的 HTML 示例，用於描述 canvas 的用法：
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="290" height="80" style="border:1px solid #d3d3d3;"></canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Georgia"; ctx.strokeText("TUTORIALSPOINT",10,50); </script> </body> </html>
執行上述指令碼將生成以下輸出：
免費的 canvas 庫
以下是一些可用於為您的網站新增合適效果的免費 canvas 庫：
D3.js
在視覺化任何型別的資料時，D3.js 庫是最受歡迎的選擇之一。它使用 SVG、Canvas 和標準 HTML 的功能生成令人驚歎的圖形和圖表。該庫對如何向用戶提供資料訪問許可權沒有太多限制。
Particles.js
在設計基於 canvas 的粒子系統時，Particles.js 包是理想的選擇。它沒有依賴項並且輕量級。大約需要 30 分鐘即可熟悉該庫的所有功能。
Matter-js
Matter-js 庫是用於二維剛體物理的 JavaScript 引擎。它可以用來模擬 canvas 上的基本物理系統。它有許多模組，可用於執行各種任務。
Paper.js
這是一個開源的向量圖形指令碼框架，它執行在 HTML5 Canvas 之上。
Paper.js 提供了一個文件物件模型，可以輕鬆建立並使用圖層、組、路徑等填充專案。建立路徑並向其新增段。路徑是由曲線連線的一系列段。
新增後，可以輕鬆檢查、操作和移動這些段。您還可以輕鬆刪除這些段。還可以獲得將向量圖形作為 SV 匯入和匯出方法。
藉助這個開源 JavaScript 庫 Paper.js，您可以使用 canvas 生成令人驚歎的視覺效果。您可以選擇使用 PaperScript，這是該庫專有的 JavaScript 版本。
Fabric.js
Fabric.js 是一個功能強大的 JavaScript HTML5 canvas 庫，廣泛用於在 canvas 元素之上提供互動式物件模型。
使用 Fabric.js，可以在 canvas 上建立和填充物件，例如簡單的幾何形狀。此外，它很容易為形狀新增漸變。輕鬆新增文字並動態操作對齊方式、大小等。
Chart.js
這是一個開源的 JavaScript 庫，它可以以 8 種不同的方式視覺化您的資料。它在所有現代瀏覽器中都具有出色的渲染效能。在視窗調整大小時輕鬆重繪圖表，以獲得完美的縮放粒度。
Chart.js 提供內建圖表，並且可以輕鬆擴充套件到自定義圖表。內建圖表包括折線圖、柱狀圖、水平柱狀圖、散點圖、氣泡圖等。
p5.js
p5.js 是一個免費的 JavaScript 庫，它提供全面的繪圖功能作為創意編碼的一部分。它簡化了在 Web 瀏覽器中建立互動式視覺效果的過程。
這個開源的 canvas 庫包括插入顏色、點、線和其他形狀。它還提供了 for 迴圈來繪製多個形狀的功能。
還有一些其他庫，例如 EaselJS、heatmap.js、JavaScript Infovis Toolkit、Konva.js、Phaser、Pts.js、Rekapi、Scrawl-Canvas 和 ZIM 框架等，它們都是開源的，並且不受 html 中 canvas 標籤的支援。
860 次瀏覽
