---
title: Canvas
slug: Web/API/Canvas_API
tags:
  - API
  - Canvas
  - JavaScript
  - WebGL
translation_of: Web/API/Canvas_API
---
<div>{{CanvasSidebar}}</div>

<p class="summary"><strong>Canvas API </strong>提供了一个通过<a href="/zh-CN/docs/Web/JavaScript">JavaScript</a> 和 <a href="/zh-CN/docs/Web/HTML">HTML</a>的{{HtmlElement("canvas")}}元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。</p>

<p>Canvas API主要聚焦于2D图形。而同样使用<code>&lt;canvas&gt;</code>元素的 <a href="/zh-CN/docs/Web/WebGL">WebGL API</a> 则用于绘制硬件加速的2D和3D图形。</p>

<h2 id="基础示例">基础示例</h2>

<p>这个简单的例子在画布绘制一个绿色的长方形。</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<p>{{domxref("Document.getElementById()")}} 方法获取HTML <code>&lt;canvas&gt;</code> 元素的引用。接着，{{domxref("HTMLCanvasElement.getContext()")}} 方法获取这个元素的context——图像稍后将在此被渲染。</p>

<p>由 {{domxref("CanvasRenderingContext2D")}} 接口完成实际的绘制。{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 属性让长方形变成绿色。{{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 方法将它的左上角放在(10, 10)，把它的大小设置成宽150高100。.</p>

<pre class="brush: js"><code>const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);</code></pre>

<h3 id="结果">结果</h3>

<p>{{ EmbedLiveSample('基础示例', 700, 180) }}</p>

<h2 id="参考">参考</h2>

<div class="index">
<ul>
 <li>{{domxref("HTMLCanvasElement")}}</li>
 <li>{{domxref("CanvasRenderingContext2D")}}</li>
 <li>{{domxref("CanvasGradient")}}</li>
 <li>{{domxref("CanvasImageSource")}}</li>
 <li>{{domxref("CanvasPattern")}}</li>
 <li>{{domxref("ImageBitmap")}}</li>
 <li>{{domxref("ImageData")}}</li>
 <li>{{domxref("RenderingContext")}}</li>
 <li>{{domxref("TextMetrics")}}</li>
 <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
 <li>{{domxref("Path2D")}}{{experimental_inline}}</li>
 <li>{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
</ul>
</div>

<div class="note">
<p><strong>备注:</strong> 与 <code>WebGLRenderingContext</code> 有关的接口请参考 <a href="/zh-CN/docs/Web/WebGL" title="/zh-CN/docs/Web/WebGL">WebGL</a>。</p>
</div>

<p>{{domxref("CanvasCaptureMediaStream")}} 也与之相关。</p>

<h2 class="Documentation" id="Documentation" name="Documentation">教程与指导</h2>

<dl>
 <dt><a href="/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial">Canvas 教程</a></dt>
 <dd>一个综合性教程，包括了&lt;canvas&gt;的基本用法与高级功能。</dd>
 <dt><a href="/zh-CN/Add-ons/Code_snippets/Canvas">代码片段: Canvas</a></dt>
 <dd>一些面向开发者的 &lt;canvas&gt; 代码片段。</dd>
 <dt></dt>
 <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html" rel="noopener">深入HTML5 Canvas</a></dt>
 <dd>一个手把手的、长度与书本相若的Canvas API和WebGL介绍。</dd>
 <dt></dt>
 <dt><a href="/zh-CN/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo：一个基础的光线追踪器</a></dt>
 <dd>运用canvas制作的光线追踪动画示例。</dd>
 <dt></dt>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">使用canvas绘制视频</a> </dt>
 <dd>结合{{HTMLElement("video")}}和 {{HTMLElement("canvas")}}来实现实时操作视频数据。</dd>
</dl>

<h2 class="Resources" id="Resources" name="Resources">库</h2>

<p>Canvas API是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于canvas的项目更快和更简单。</p>

<ul>
 <li><a href="http://www.createjs.com/easeljs">EaselJS</a> 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源canvas库</li>
 <li><a href="http://fabricjs.com">Fabric.js</a> 具有SVG解析功能的开源canvas库</li>
 <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> 基于 canvas的热点图的开源库</li>
 <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> 创建交互式的2D Canvas数据可视化</li>
 <li><a href="https://konvajs.github.io/">Konva.js</a> 用于桌面端和移动端应用的2D canvas库</li>
 <li><a href="https://p5js.org/">p5.js </a>包含给艺术家、设计师、教育者、初学者使用的完整的canvas绘制功能</li>
 <li><a href="http://paperjs.org/">Paper.js</a> 运行于HTML5 Canvas上的开源矢量图形脚本框架</li>
 <li><a href="https://phaser.io/">Phaser</a> 用于基于Canvas和WebGL的浏览器尤其的快速、自由、有趣的开源框架</li>
 <li><a href="http://processingjs.org">Processing.js</a> 用于处理可视化语言</li>
 <li><a href="https://ptsjs.org/">Pts.js</a> 在canvas和SVG中进行创意性代码写作和可视化的库</li>
 <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> 关键帧动画库</li>
 <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> 用来创建和编辑2D图形的开源库</li>
 <li><a href="http://zimjs.com/">ZIM</a> 框架为canvas上的代码创意性提供方便性、组件和可控性，包括可用性和数百个色彩缤纷的教程</li>
</ul>

<div class="note">
<p><strong>备注:</strong> 与WebGL有关的2D和3D的库请参考 <a href="/zh-CN/docs/Web/WebGL" title="/zh-CN/docs/Web/WebGL">WebGL</a>。</p>
</div>

<h2 id="Specifications" name="Specifications">标准</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">标准</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 class="Resources" id="Resources" name="Resources">浏览器兼容性</h2>

<p>Mozilla 程序从 Gecko 1.8 (<a href="https://developer.mozilla.org/zh-CN/docs/Firefox_1.5_for_developers" rel="nofollow" title="Firefox_1.5_for_developers">Firefox 1.5</a>) 开始支持 <code>&lt;canvas&gt;</code>。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从IE9开始支持<code>&lt;canvas&gt;</code> ，更旧版本的IE中，页面可以通过引入 Google 的 <a href="https://github.com/arv/explorercanvas" rel="noopener">Explorer Canvas</a> 项目中的脚本来获得<code>&lt;canvas&gt;</code>支持。Google Chrome和Opera 9+ 也支持 <code>&lt;canvas&gt;</code>。</p>

<h2 id="其它相关">其它相关</h2>

<ul>
 <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
</ul>

<section id="Quick_links"></section>