--- 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><canvas></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"><canvas id="canvas"></canvas> </pre> <h3 id="JavaScript">JavaScript</h3> <p>{{domxref("Document.getElementById()")}} 方法获取HTML <code><canvas></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>一个综合性教程,包括了<canvas>的基本用法与高级功能。</dd> <dt><a href="/zh-CN/Add-ons/Code_snippets/Canvas">代码片段: Canvas</a></dt> <dd>一些面向开发者的 <canvas> 代码片段。</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><canvas></code>。它首先是由 Apple 引入的,用于 OS X Dashboard 和 Safari。Internet Explorer 从IE9开始支持<code><canvas></code> ,更旧版本的IE中,页面可以通过引入 Google 的 <a href="https://github.com/arv/explorercanvas" rel="noopener">Explorer Canvas</a> 项目中的脚本来获得<code><canvas></code>支持。Google Chrome和Opera 9+ 也支持 <code><canvas></code>。</p> <h2 id="其它相关">其它相关</h2> <ul> <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> </ul> <section id="Quick_Links"></section>