画布对象
Canvas对象是HTML5新。
HTML5的<canvas>标记用于绘制图形，在飞行中，用JavaScript。
进入一个Canvas对象
可以访问一个<canvas>通过使用元素getElementById()
创建一个Canvas对象
可以创建一个<canvas>使用元素document. createElement() document. createElement()方法：
注： <canvas>元素都有自己的无图纸的能力（这是仅适用于图形容器） -你必须使用脚本来实际绘制图形。
所述getContext()方法返回一个对象，它提供的方法和属性用于在画布上绘图。
该参考将覆盖的属性和方法getContext("2d")对象，它可用于绘制文本，线，矩形，圆形，多-在画布上。
颜色，款式和阴影
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回颜色，梯度，或图案用来填充图 |
| strokeStyle | 设置或返回颜色，梯度，或图案用于笔划 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回阴影模糊等级 |
| shadowOffsetX | 设置或从形状返回阴影的水平距离 |
| shadowOffsetY | 设置或从形状返回阴影的垂直距离 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建的线性梯度(to use on canvas content) |
| createPattern() | 重复在指定的方向上的规定的元件 |
| createRadialGradient() | 创建一个径向/圆形梯度(to use on canvas content) |
| addColorStop() | 指定颜色和渐变对象终点位置 |
线型
| 属性 | 描述 |
|---|---|
| lineCap | 设置或返回端盖的风格线 |
| lineJoin | 设置或返回角落创建的类型，当两条线满足 |
| lineWidth | 设置或返回当前线宽 |
| miterLimit | 设置或返回的最大长度斜切 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 创建一个矩形 |
| fillRect() | 绘制一个"filled"矩形 |
| strokeRect() | 绘制一个矩形(no fill) |
| clearRect() | 清除一个给定的矩形内的指定的像素 |
路径
| 方法 | 描述 |
|---|---|
| fill() | 填充当前绘图(path) |
| stroke() | 其实吸引你所定义的路径 |
| beginPath() | 开始的路径，或重置当前路径 |
| moveTo() | 移动路径在画布上指定的点，而无需创建一个行 |
| closePath() | 创建从当前点的路径回到起点 |
| lineTo() | 添加新的点，并在画布上创建一个从点到最后指定点的直线 |
| clip() | 从原来的画布剪辑的任何形状和大小的区域 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建一个三次Bezier曲线 |
| arc() | 创建圆弧/曲线(used to create circles, or parts of circles) |
| arcTo() | 创建两个切线之间的电弧/曲线 |
| isPointInPath() | 如果指定的点是在当前路径，则返回true，否则为false |
转换
| 方法 | 描述 |
|---|---|
| scale() | 缩放当前绘图大或变小 |
| rotate() | 旋转当前图纸 |
| translate() | 重新映射(0,0)的画布上的位置 |
| transform() | 替换当前变换矩阵为绘图 |
| setTransform() | 复位电流转换为单位矩阵。 然后运行transform() |
文本
| 属性 | 描述 |
|---|---|
| font | 设置或返回文本内容的当前字体属性 |
| textAlign | 设置或返回文本内容的当前定位 |
| textBaseline | 设置或返回当前文本基线绘制文本时使用 |
| 方法 | 描述 |
|---|---|
| fillText() | 绘制"filled"在画布上的文字 |
| strokeText() | 绘制在画布上的文本(no fill) |
| measureText() | 返回包含指定文本的宽度的对象 |
图像绘制
| 方法 | 描述 |
|---|---|
| drawImage() | 绘制图像，帆布，或视频到画布 |
像素操作
| 属性 | 描述 |
|---|---|
| width | 返回的ImageData对象的宽度 |
| height | 返回的ImageData对象的高度 |
| data | 返回包含指定的ImageData对象的图像数据中的对象 |
| 方法 | 描述 |
|---|---|
| createImageData() | 创建一个新的，空白的ImageData对象 |
| getImageData() | 返回的ImageData对象副本在画布上为指定的矩形的像素数据 |
| putImageData() | 放的图像数据(from a specified ImageData object)回到画布 |
合成
| 属性 | 描述 |
|---|---|
| globalAlpha | 设置或返回附图的当前α或透明度值 |
| globalCompositeOperation | 新的图像的绘制到现有的图像设置或返回 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存当前上下文的状态 |
| restore() | 返回先前保存的路径状态和属性 |
| createEvent() | |
| getContext() | |
| toDataURL() |
标准属性和事件
相关页面
HTML教程： HTML5画布
HTML参考： HTML <canvas>标签