Canvas - Web API

<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 開源庫