<canvas> 是 HTML5 新增的元素，可用於通過使用JavaScript中的腳本來繪制圖形。例如，它可以用於繪制圖形，制作照片，創建動畫，甚至可以進行實時視頻處理或渲染。

Mozilla 程序從 Gecko 1.8 (Firefox 1.5) 開始支持 <canvas>。它首先是由 Apple 引入的，用於 OS X Dashboard 和 Safari。Internet Explorer 從IE9開始<canvas> ，更舊版本的IE可以引入 Google 的 Explorer Canvas 項目中的腳本來獲得<canvas>支持。Chrome和Opera 9+ 也支持 <canvas>

WebGL也使用<canvas>元素在網頁上繪制硬件加速的3D圖形。

示例

這只是一個使用 CanvasRenderingContext2D.fillRect() 方法簡單的代碼片段。

HTML

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

JavaScript

var canvas = document.getElementById(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);

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

編輯下面的代碼，查看畫布的變化:

參考

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasPattern
• ImageBitmap
• ImageData
• TextMetrics
• Path2D

與 WebGLRenderingContext 有關的接口請參考 WebGL.

教程與指導

Canvas 教程

包括了<canvas>的基本用法與高級功能的綜合性教程。

代碼片段: Canvas

一些面向開發者的 <canvas> 代碼片段。

光線追蹤Demo

運用canvas制作的光線追蹤動畫示例。

在canvas上繪制DOM對象

如何在canvas上繪制DOM內容，如HTML元素。

使用canvas繪制圖形

結合<video>和 <canvas>來實現實時操作視頻數據。

資源

通用

• 深入HTML5 Canvas
• Canvas手冊

庫

• Fabric.js 具有SVG解析功能的開源canvas庫
• Kinetic.js 專註於桌面與移動應用中的交互操作的開源canvas庫
• Paper.js 運行於HTML5 Canvas上的開源矢量圖形腳本框架
• Origami.js 開源的輕量的canvas庫
• libCanvas 強大輕量的canvas框架
• Processing.js 用於處理可視化語言
• PlayCanvas 一個開源的遊戲引擎
• Pixi.js 一個開源的遊戲引擎
• PlotKit 圖表庫
• Rekapi 關鍵幀動畫庫
• PhiloGL 用於數據可視化，創意編程和遊戲開發的WebGL框架
• JavaScript InfoVis Toolkit 創建交互式的2D Canvas數據可視化
• EaselJS 類Flash API的canvas庫
• Scrawl-canvas 用來創建2d圖形的開源庫
• heatmap.js 基於 heatmaps 的 canvas 開源庫

Canvas - Web API