canvas的相关知识
| 方法 | 用途 |
|---|---|
getContext(contextId) |
公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID是 2d。 |
height |
设置 canvas 的高度。默认值是 150 像素。 |
width |
设置 canvas 的宽度。默认值是 300 像素。 |
createLinearGradient(x1,y1,x2,y2) |
创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。 |
createRadialGradient(x1,y1,r1,x2,y2,r2) |
创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。 |
addColorStop(offset, color) |
向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。 |
fillStyle |
设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'. |
strokeStyle |
设置用于绘制一根直线的颜色 — 例如，fillStyle='rgb(255,0,0)'. |
fillRect(x,y,w,h) |
填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。 |
strokeRect(x,y,w,h) |
绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。 |
moveTo(x,y) |
将绘图位置移动到坐标 x,y。 |
lineTo(x,y) |
从绘图方法结束的最后位置到 x,y 绘制一条直线。 |
CanvasRenderingContext2D 对象的方法
| 方法 | 描述 |
|---|---|
| arc() | 用一个中心点和半径，为一个画布的当前子路径添加一条弧线。 |
| arcTo() | 使用目标点和一个半径，为当前的子路径添加一条弧线。 |
| beginPath() | 开始一个画布中的一条新路径（或者子路径的一个集合）。 |
| bezierCurveTo() | 为当前的子路径添加一个三次贝塞尔曲线。 |
| clearRect() | 在一个画布的一个矩形区域中清除掉像素。 |
| clip() | 使用当前路径作为连续绘制操作的剪切区域。 |
| closePath() | 如果当前子路径是打开的，就关闭它。 |
| createLinearGradient() | 返回代表线性颜色渐变的一个 CanvasGradient 对象。 |
| createPattern() | 返回代表贴图图像的一个 CanvasPattern 对象。 |
| createRadialGradient() | 返回代表放射颜色渐变的一个 CanvasGradient 对象。 |
| drawImage() | 绘制一幅图像。 |
| fill() | 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。 |
| fillRect() | 绘制或填充一个矩形。 |
| lineTo() | 为当前的子路径添加一条直线线段。 |
| moveTo() | 设置当前位置并开始一条新的子路径。 |
| quadraticCurveTo() | 为当前路径添加一条贝塞尔曲线。 |
| rect() | 为当前路径添加一条矩形子路径。 |
| restore() | 为画布重置为最近保存的图像状态。 |
| rotate() | 旋转画布。 |
| save() | 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。 |
| scale() | 标注画布的用户坐标系统。 |
| stroke() | 沿着当前路径绘制或画一条直线。 |
| strokeRect() | 绘制（但不填充）一个矩形。 |
| translate() | 转换画布的用户坐标系统。 |
