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 July 2015.

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

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

基本範例

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

HTML

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

JavaScript

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

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

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

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

結果

參考

備註： 與 WebGLRenderingContext 相關的介面可參考 WebGL。

備註： OffscreenCanvas 也可以在 Web Worker 中使用。

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 繪圖功能，適合藝術家、設計師、教育者和初學者。
  • 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

瀏覽器相容性

參見