# HTML <canvas> 标签
## 实例
如何通过 canvas 元素来显示一个红色的矩形:
```
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
```
## 浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
| --- | --- | --- | --- | --- |
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。
## 定义和用法
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
## HTML 4.01 与 HTML 5 之间的差异
<canvas> 标签是 HTML 5 中的新标签。
## 属性
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
| --- | --- | --- |
| [height](/tags/att_canvas_height.asp "HTML5 <canvas> height 属性") | _pixels_ | 设置 canvas 的高度。 |
| [width](/tags/att_canvas_width.asp "HTML5 <canvas> width 属性") | _pixels_ | 设置 canvas 的宽度。 |
## 全局属性
<canvas> 标签支持 [HTML 中的全局属性](/tags/html_ref_standardattributes.asp)。
## 事件属性
<canvas> 标签支持 [HTML 中的事件属性](/tags/html_ref_eventattributes.asp)。
## <canvas> 的历史
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
我们甚至可以在 IE 中使用 <canvas> 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。 参见:[http://excanvas.sourceforge.net/](http://excanvas.sourceforge.net/ "ExplorerCanvas")。
<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。 参见:[http://www.whatwg.org/specs/web-apps/current-work/](http://www.whatwg.org/specs/web-apps/current-work/ "HTML 5")
## <canvas> 标记和 SVG 以及 VML 之间的差异
<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。
这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有强项和弱点。例如,SVG 绘图很容易编辑,只要从其描述中移除元素就行。
要从同一图形的一个 <canvas> 标记中移除元素,往往需要擦掉绘图重新绘制它。
## 如何使用 <canvas> 标记绘图
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 [getContext() 方法](/jsref/met_canvas_getcontext.asp "HTML DOM getContext() 方法")获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法。
一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用。
注释:Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形,必须要么自己绘制它再用位图图像合并它,或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。
## 相关页面
HTML 教程:[HTML <canvas> 元素](/html5/html_5_canvas.asp "HTML 5 Canvas")
HTML DOM 参考手册:[HTML DOM Canvas 对象](/jsref/dom_obj_canvas.asp "HTML DOM Canvas 对象")
- HTML 标签列表
- HTML <!--...--> 标签
- HTML <!DOCTYPE> 标签
- HTML <a> 标签
- HTML <abbr> 标签
- HTML <acronym> 标签
- HTML <address> 标签
- HTML <applet> 标签
- HTML <area> 标签
- HTML <article> 标签
- HTML <aside> 标签
- HTML <audio> 标签
- HTML <b> 标签
- HTML <base> 标签
- HTML <basefont> 标签
- HTML <bdi> 标签
- HTML <bdo> 标签
- HTML <big> 标签
- HTML <blockquote> 标签
- HTML <body> 标签
- HTML <br> 标签
- HTML <button> 标签
- HTML <canvas> 标签
- HTML <caption> 标签
- HTML <center> 标签
- HTML <cite> 标签
- HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签
- HTML <col> 标签
- HTML <colgroup> 标签
- HTML <command> 标签
- HTML <datalist> 标签
- HTML <dd> 标签
- HTML <del> 标签
- HTML <details> 标签
- HTML <dialog> 标签
- HTML <dir> 标签
- HTML <div> 标签
- HTML <dl> 标签
- HTML <dt> 标签
- HTML <embed> 标签
- HTML <fieldset> 标签
- HTML <figcaption> 标签
- HTML <figure> 标签
- HTML <font> 标签
- HTML <footer> 标签
- HTML <form> 标签
- HTML <frame> 标签
- HTML <frameset> 标签
- HTML <h1> 到 <h6> 标签
- HTML <head> 标签
- HTML <header> 标签
- HTML <hr> 标签
- HTML <html> 标签
- HTML <i> 标签
- HTML <iframe> 标签
- HTML <img> 标签
- HTML <input> 标签
- HTML DOM Button 对象
- HTML DOM Checkbox 对象
- HTML DOM Color 对象
- HTML DOM Input Date 对象
- HTML DOM Datetime 对象
- HTML DOM Datetime Local 对象
- HTML DOM Email 对象
- HTML DOM FileUpload 对象
- HTML DOM Hidden 对象
- HTML DOM Input Image 对象
- HTML DOM Month 对象
- HTML DOM Number 对象
- HTML DOM Password 对象
- HTML DOM Input Range 对象
- HTML DOM Radio 对象
- HTML DOM Reset 对象
- HTML DOM Input Search 对象
- HTML DOM Submit 对象
- HTML DOM Text 对象
- HTML DOM Input Time 对象
- HTML DOM Input URL 对象
- HTML DOM Input Week 对象
- HTML <ins> 标签
- HTML <keygen> 标签
- HTML <label> 标签
- HTML <legend> 标签
- HTML <li> 标签
- HTML <link> 标签
- HTML <main> 标签
- HTML <map> 标签
- HTML <mark> 标签
- HTML <menu> 标签
- HTML <menuitem> 标签
- HTML <meta> 标签
- HTML <meter> 标签
- HTML <nav> 标签
- HTML <noframes> 标签
- HTML <noscript> 标签
- HTML <object> 标签
- HTML <ol> 标签
- HTML <optgroup> 标签
- HTML <option> 标签
- HTML <output> 标签
- HTML <p> 标签
- HTML <param> 标签
- HTML <pre> 标签
- HTML <progress> 标签
- HTML <q> 标签
- HTML <rp> 标签
- HTML <rt> 标签
- HTML <ruby> 标签
- HTML <s> 标签
- HTML <script> 标签
- HTML <section> 标签
- HTML <select> 标签
- HTML <small> 标签
- HTML <source> 标签
- HTML <span> 标签
- HTML <strike> 标签
- HTML <style> 标签
- HTML <sub> 标签
- HTML <summary> 标签
- HTML <sup> 标签
- HTML <table> 标签
- HTML <tbody> 标签
- HTML <td> 标签
- HTML <textarea> 标签
- HTML <tfoot> 标签
- HTML <th> 标签
- HTML <thead> 标签
- HTML <time> 标签
- HTML <title> 标签
- HTML <tr> 标签
- HTML <track> 标签
- HTML <tt> 标签
- HTML <u> 标签
- HTML <ul> 标签
- HTML <video> 标签
- HTML <wbr> 标签
- HTML 全局属性
- HTML accesskey 属性
- HTML class 属性
- HTML contenteditable 属性
- HTML contextmenu 属性
- HTML data-* 属性
- HTML dir 属性
- HTML draggable 属性
- HTML dropzone 属性
- HTML hidden 属性
- HTML id 属性
- HTML lang 属性
- HTML spellcheck 属性
- HTML style 属性
- HTML tabindex 属性
- HTML title 属性
- HTML translate 属性
- HTML 事件属性
- HTML 5 视频/音频参考手册
- HTML 5 Canvas 参考手册
- HTML 元素和有效的 DTD
- HTML 颜色名
- HTML 字符集
- HTML ASCII 参考手册
- HTML ISO-8859-1 参考手册
- HTML 4.01 符号实体
- HTML URL 编码
- HTML 语言代码参考手册
- HTTP 状态消息
- HTTP 方法:GET 对比 POST
- 免责声明