Canvas API
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
Canvas API 提供了一種透過 JavaScript 和 HTML <canvas> 元素繪製圖形的方法。除此之外，它還可用於動畫、遊戲圖形、資料視覺化、照片處理以及即時視訊處理等。
Canvas API 主要專注於 2D 圖形。而 WebGL API 也使用 <canvas> 元素，用於繪製硬體加速的 2D 和 3D 圖形。
基本範例
這個簡單的範例會在畫布上繪製一個綠色的矩形。
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);
結果
參考
HTMLCanvasElementCanvasRenderingContext2DCanvasGradientCanvasPatternImageBitmapImageDataTextMetricsOffscreenCanvasPath2D實驗性質ImageBitmapRenderingContext實驗性質
備註：
與 WebGLRenderingContext 相關的介面可參考 WebGL。
備註：
OffscreenCanvas 也可以在 Web Worker 中使用。
CanvasCaptureMediaStreamTrack 是一個相關的介面。
指南與教學
- Canvas 教學
-
一個全面的教學，涵蓋 Canvas API 的基本用法及其進階功能。
- HTML5 Canvas 深入探討
-
一本實作導向的書籍，介紹 Canvas API 和 WebGL。
- Canvas 手冊
-
Canvas API 的便利參考手冊。
- 使用 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。
規範
| Specification |
|---|
| HTML # the-canvas-element |
瀏覽器相容性
Loading…