Canvas API

基本示例

這個簡單的示例在 canvas 上繪製了一個綠色矩形。

HTML

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

JavaScript

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

結果

參考

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasPattern
• ImageBitmap
• ImageData
• TextMetrics
• OffscreenCanvas
• Path2D 實驗性
• ImageBitmapRenderingContext 實驗性

CanvasCaptureMediaStreamTrack 是一個相關的介面。

指南和教程

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 繪圖功能，適用於藝術家、設計師、教育工作者和初學者。
• Phaser 是一個快速、免費且有趣的開源框架，用於支援 Canvas 和 WebGL 的瀏覽器遊戲。
• Pts.js 是一個用於在 canvas 和 SVG 中進行創意編碼和視覺化的庫。
• Rekapi 是一個用於 Canvas 的動畫關鍵幀 API。
• Scrawl-canvas 是一個用於建立和操作 2D canvas 元素的開源 JavaScript 庫。
• ZIM 框架在 canvas 上提供了便利、元件和控制元件，用於創意編碼——包括可訪問性和數百個色彩鮮豔的教程。
• Sprig 是一個初學者友好、開源、基於瓦片的 Sprig 是一款對初學者友好的開源、基於瓦片的遊戲開發庫，它使用 Canvas。

規範

瀏覽器相容性

另見

• WebGL