Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API below:

Canvas API - Web APIs

Baseline Widely available

Canvas API 提供了一種透過 JavaScript 和 HTML <canvas> 元素繪製圖形的方法。除此之外，它還可用於動畫、遊戲圖形、資料視覺化、照片處理以及即時視訊處理等。

Canvas API 主要專注於 2D 圖形。而 WebGL API 也使用 <canvas> 元素，用於繪製硬體加速的 2D 和 3D 圖形。

這個簡單的範例會在畫布上繪製一個綠色的矩形。

<canvas id="canvas"></canvas>

Document.getElementById() 方法取得 HTML <canvas> 元素的參考。接著，HTMLCanvasElement.getContext() 方法取得該元素的上下文——繪製將會算繪到此處。

實際的繪製是透過 CanvasRenderingContext2D 介面完成的。fillStyle 屬性將矩形設為綠色。fillRect() 方法將矩形的左上角放置在 (10, 10)，並設定其寬度為 150 單位，高度為 100 單位。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

Canvas 教學

一個全面的教學，涵蓋 Canvas API 的基本用法及其進階功能。

HTML5 Canvas 深入探討

一本實作導向的書籍，介紹 Canvas API 和 WebGL。

Canvas 手冊

Canvas API 的便利參考手冊。

使用 canvas 操作視訊

結合 <video> 和 <canvas> 即時操作視訊資料。

Canvas API 功能非常強大，但並不總是容易使用。以下列出的函式庫可以讓基於 Canvas 的專案創建更快速、更簡單。

• EaselJS 是一個開源的 Canvas 函式庫，讓創建遊戲、生成藝術和其他高度圖形化的體驗變得簡單。
• Fabric.js 是一個具有 SVG 解析能力的開源 Canvas 函式庫。
• heatmap.js 是一個用於創建基於 Canvas 的資料熱圖的開源函式庫。
• JavaScript InfoVis Toolkit 用於創建互動式資料視覺化。
• Konva.js 是一個用於桌面和行動應用的 2D Canvas 函式庫。
• p5.js 提供完整的 Canvas 繪圖功能，適合藝術家、設計師、教育者和初學者。
• Paper.js 是一個運行於 HTML Canvas 之上的開源向量圖形腳本框架。
• Phaser 是一個快速、免費且有趣的開源框架，用於基於 Canvas 和 WebGL 的瀏覽器遊戲。
• Pts.js 是一個用於 Canvas 和 SVG 的創意編碼與視覺化函式庫。
• Rekapi 是一個用於 Canvas 的動畫關鍵幀 API。
• Scrawl-canvas 是一個開源 JavaScript 函式庫，用於創建和操作 2D Canvas 元素。
• ZIM 框架提供了便利性、元件和控制項，用於 Canvas 上的創意編碼——包括無障礙功能和數百個彩色教學。
• Sprig 是一個適合初學者的開源基於 Canvas 的圖塊遊戲開發函式庫。

備註： 有關使用 WebGL 的 2D 和 3D 函式庫，請參見 WebGL API。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4