画布 API | Web API

在此页

基本范例
参考
指南和教程
库
规范
浏览器兼容性
另请参阅
相关话题

画布 API provides a means for drawing graphics via JavaScript 和 HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics. The WebGL API , which also uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.

基本范例

This simple example draws a green rectangle onto a canvas.

HTML

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

JavaScript

Document.getElementById() method gets a reference to the HTML <canvas> element. Next, the HTMLCanvasElement.getContext() method gets that element's context—the thing onto which the drawing will be rendered.

The actual drawing is done using the CanvasRenderingContext2D 接口。 fillStyle property makes the rectangle green. The fillRect() method places its top-left corner at (10, 10), and gives it a size of 150 units wide by 100 tall.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

结果

参考

注意： The interfaces related to the WebGLRenderingContext are referenced under WebGL .

CanvasCaptureMediaStream is a related interface.

指南和教程

Canvas tutorial
HTML5 Canvas Deep Dive
Canvas Handbook
Demo: A basic ray-caster
Manipulating video using canvas: 组合 <video> and <canvas> to manipulate video data in real time.

库

The Canvas API is extremely powerful, but not always simple to use. The libraries listed below can make the creation of canvas-based projects faster and easier.

EaselJS is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
Fabric.js is an open-source canvas library with SVG parsing capabilities.
heatmap.js is an open-source library for creating canvas-based data heat maps.
JavaScript InfoVis Toolkit creates interactive data visualizations.
Konva.js is a 2D canvas library for desktop and mobile applications.
p5.js has a full set of canvas drawing functionality for artists, designers, educators, and beginners.
Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas.
Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games.
Processing.js is a port of the Processing visualization language.
Pts.js is a library for creative coding and visualization in canvas and SVG.
Rekapi is an animation key-framing API for Canvas.
Scrawl-canvas is an open-source JavaScript library for creating and manipulating 2D canvas elements.
ZIM framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.

注意： 见 WebGL API for 2D and 3D libaries that use WebGL.

规范

规范	状态	注释
HTML 实时标准 The definition of 'the 2D rendering context' in that specification.	实时标准

浏览器兼容性

Mozilla applications gained support for <canvas> starting with Gecko 1.8 ( Firefox 1.5 ). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <canvas> by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas> .

另请参阅

WebGL

元数据

最后修改： Jun 8, 2020

在此页