HTML DOM Canvas 对象

w3school 在线教程

## JS & DOM 参考手册

- 参考手册目录

## JavaScript 对象

- JS Array
- JS Boolean
- JS Date
- JS Math
- JS Number
- JS String
- JS RegExp
- JS Functions
- JS Events

## Browser 对象

- Window
- Navigator
- Screen
- History
- Location

## HTML DOM 对象

- DOM Document
- DOM Element
- DOM Attribute
- DOM Event

## HTML 对象

- <a>
- <area>
- <audio>
- <base>
- <body>
- <blockquote>
- <button>
- <canvas>
- <col>
- <colgroup>
- <datalist>
- <del>
- <details>
- <dialog>
- <embed>
- <fieldset>
- <form>
- <frame>
- <frameset>
- <iframe>
- <img>
- <ins>
- <input> button
- <input> checkbox
- <input> color
- <input> date
- <input> datetime
- <input> datetime-local
- <input> email
- <input> file
- <input> hidden
- <input> image
- <input> month
- <input> number
- <input> password
- <input> range
- <input> radio
- <input> reset
- <input> search
- <input> submit
- <input> text
- <input> time
- <input> url
- <input> week
- <keygen>
- <label>
- <legend>
- <li>
- <link>
- <map>
- <menu>
- <menuitem>
- <meta>
- <meter>
- <object>
- <ol>
- <optgroup>
- <option>
- <param>
- <progress>
- <q>
- <script>
- <select>
- <source>
- <style>
- <table>
- <td>
- <th>
- <tr>
- <textarea>
- <time>
- <title>
- <track>
- <video>

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# HTML DOM Canvas 对象

## Canvas 对象

Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过 CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的 getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。

<canvas> 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 标记及其 API 可以使用位于 excanvas.sourceforge.net 的 ExplorerCanvas 开源项目来模拟。

提示：如果希望学习如何使用 <canvas> 来绘制图形，可以访问 Mozilla 提供的 Canvas 教程（英文）以及相应的 中文 Canvas 教程。

## Canvas 对象的属性

### height 属性

画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

### width 属性

画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

## Canvas 对象的方法

方法 | 描述
--- | ---
getContext() | 返回一个用于在画布上绘图的环境。

## 参阅

HTML5 <canvas> 标签

HTML5 Canvas 教程

HTML5 Canvas 参考手册