CanvasRenderingContext2D 对象
CanvasRenderingContext2D对象提供了一组用来在画布上绘制的图形函数。它们可以分为以下几类：
绘制矩形
可以使用strokeRect()和fillRect()来绘制矩形的边框和填充矩形。可以使用clearRect()来清除矩形所定义的区域。
strokeRect()方法
strokeRect()方法绘制矩形（不填色）。默认为黑色。
<script>
context.strokeRect(x,y,width,height);
</script>| 参数 | 描述 |
|---|---|
| x | 矩形左上角的x坐标 |
| y | 矩形左上角的y坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
fillRect()方法
fillRect()方法绘制矩形（填色）。默认为黑色。
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的x坐标 |
| y | 矩形左上角的y坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
<script>
context.fillRect(x,y,width,height);
</script>clearRect()方法
clearReact()方法清空给定矩形内的指定像素。
| 参数 | 描述 |
|---|---|
| x | 要清除的矩形左上角的x坐标 |
| y | 要清除的矩形左上角的y坐标 |
| width | 要清除的矩形的宽度，以像素计 |
| height | 要清除的矩形的高度，以像素计 |
<script>
context.clearRect(x,y,width,height);
</script>绘制图像
在Canvas API中图像通过Image对象来指定，或者通过用Image()构造函数所创建的屏幕外图像来指定。一个Canvas对象也可以作为图像来源。
用drawImage()方法在画布上绘制图像。也可以允许源图像的任意矩形区域缩放或绘制到画布上。
Image对象
Image对象代表嵌入的图像。Image对象。
Image对象的属性
| 属性 | 描述 |
|---|---|
| align | 设置或返回与内联内容的对齐方式。 |
| alt | 设置或返回无法显示图像时的替代文本。 |
| border | 设置或返回图像周围的边框。 |
| complete | 返回浏览器是否已完成对图像的加载。 |
| height | 设置或返回图像的高度。 |
| hspace | 设置或返回图像左侧和右侧的空白。 |
| id | 设置或返回图像的id。 |
| isMap | 返回图像是否是服务器端的图像映射。 |
| longDesc | 设置或返回指向包含图像描述的文档的 URL。 |
| lowsrc | 设置或返回指向图像的低分辨率版本的 URL。 |
| name | 设置或返回图像的名称。 |
| src | 设置或返回图像的 URL。 |
| useMap | 设置或返回客户端图像映射的 usemap 属性的值。 |
| vspace | 设置或返回图像的顶部和底部的空白。 |
| width | 设置或返回图像的宽度。 |
Image对象的事件
| 事件 | 描述 |
|---|---|
| onabort | 当用户放弃图像的装载时调用的事件句柄。 |
| onerror | 在装载图像的过程中发生错误时调用的事件句柄。 |
| onload | 当图像装载完毕时调用的事件句柄。 |
drawImage()方法
drawImage()方法绘制图像。
参数
| 参数 | 描述 |
|---|---|
| image | 所要绘制的图像。 这必须是表示 |
| x，y | 要绘制的图像的左上角的位置。 |
| width，height | 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。 |
| sourceX，sourceY | 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。 |
| sourceWidth, sourceHeight | 图像所要绘制区域的大小，用图像像素表示。 |
| destX, destY | 所要绘制的图像区域的左上角的画布坐标。 |
| destWidth, destHeight | 图像区域所要绘制的画布大小。 |
语法
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight)创建、渲染路径
绘制图形的框架或者给这些图形的内容涂色（填充）。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。
为构建一个封闭的形状， 因此这些绘制操作之间需要一个连接点。画布保存了一个当前位置来作为这个连接点。画布绘制操作将当前位置作为起始点，一直更新到终点，在画布上看就像是用笔画了一条线。当我们完成具体的操作（无论是画直线或是曲线）以后，当前位置会变更为操作的终点，也就是最后一个动作的终点。
我们可以在当前路径中画下多个不连续的图形。这时候我们就需要用上moveTo()方法。这个方法的目的是将当前位置移动到一个新位置（不会添加连接线）。当你的路径写完以后，你可以用stroke()方法绘制边框，也可以用fill()方法填充路径。
绘制路径
moveTo()方法
将当前位置移到目标点。
参数
| 参数 | 描述 |
|---|---|
| x | 路径的目标位置的 x 坐标 |
| y | 路径的目标位置的 y 坐标 |
context.moveTo(x,y);stroke()方法
stroke()方法会绘制出lineTo()方法定义的路线，即边框。
context.stroke();fill()方法
fill()方法填充当前的路径。默认黑色。
context.fill();可用的图形操作
绘制图形的操作有很多，例如绘制直线的lineTo，绘制矩形的rect()，绘制圆形的arc()或arcTo()，绘制曲线的bezierCurveTo()和quadraticCurveTo()。
lineTo()方法
lineTo()方法添加一个新点，创建从当前位置到最后指定点的线条（不会直接在画布上创建线条）。
| 参数 | 描述 |
|---|---|
| x | 路径的目标位置的 x 坐标 |
| y | 路径的目标位置的 y 坐标 |
context.lineTo(x,y);rect()方法
rect()方法创建矩形。此方法仅能创建一个矩形路径，边框或填充需要stroke()或fill()方法绘制。
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
context.rect(x,y,width,height);arc()方法
arc()方法创建弧/曲线。它用于创建圆、或部分圆。
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
context.arc(x,y,r,sAngle,eAngle,counterclockwise);actTo()方法
actTo方法在画布上创建介于两个切线之间的弧线。
| 参数 | 描述 |
|---|---|
| x1 | 弧的起点的 x 坐标 |
| y1 | 弧的起点的 y 坐标 |
| x2 | 弧的终点的 x 坐标 |
| y2 | 弧的终点的 y 坐标 |
| r | 弧的半径 |
context.fillRect(x1,y1,x2,y2,r);bezierCurveTo()方法
bezierCurveTo() 方法在一个画布中开始子路径的一个新的集合。 这个方法用来画曲线的。参数如下。
| 参数 | 描述 |
|---|---|
| cpX1，cpY1 | 和曲线的开始点（当前位置）相关联的控制点的坐标。 |
| cpX2，cpY2 | 和曲线的结束点相关联的控制点的坐标。 |
| x，y | 曲线的结束点的坐标。 |
bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)quadraticCurveTo()方法
quadraticCurveTo() 方法为当前路径添加一条贝塞尔曲线。
| 参数 | 描述 |
|---|---|
| cpX，cpY | 控制点的坐标 |
| x，y | 曲线终点的坐标 |
quadraticCurveTo(cpX, cpY, x, y)