html5中的canvas绘图方法
qingheluo2017-08-21清河洛920
CanvasRenderingContext2D对象的方法：
方法
参数
描述
arc(x, y, radius, startAngle, endAngle, counterclockwise)
x, y 描述弧的圆形的圆心的坐标。
radius 描述弧的圆形的半径。
startAngle, endAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。沿着 X 轴正半轴的三点钟方向的角度为 0
counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。
使用一个中心点和半径，为一个画布的当前子路径添加一条弧。这个方法...
CanvasRenderingContext2D对象的方法：
| 方法 | 参数 | 描述 |
| arc(x, y, radius, startAngle, endAngle, counterclockwise) | x, y 描述弧的圆形的圆心的坐标。 radius 描述弧的圆形的半径。 startAngle, endAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。沿着 X 轴正半轴的三点钟方向的角度为 0 counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。 |
使用一个中心点和半径，为一个画布的当前子路径添加一条弧。这个方法的头5个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来，它沿着圆周，在子路径的起始点和结束点之间添加弧。 startAngle, endAngle用Math.PI*n表示，360°角=2π弧度，如90度为Math.PI*0.5 最后一个 counterclockwise 参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。这个方法将当前位置设置为弧的终点。 |
| arcTo(x1, y1, x2, y2, radius) | x1, y1 点 P1 的坐标。 x2, y2 点 P2 的坐标。 radius 定义圆弧的圆的半径。 |
使用切点和一个半径，来为当前子路径添加一条圆弧。这个方法为当前的子路径添加了一条圆弧，但是，它所描述的这条圆弧和 arc() 方法所描述的圆弧大不相同。添加给路径的圆弧是具有指定 radius 的圆的一部分。该圆弧有一个点与当前位置到 P1 的线段相切，还有一个点和从 P1 到 P2 的线段相切。这两个切点就是圆弧的起点和终点，圆弧绘制的方向就是连接这两个点的最短圆弧的方向。 在很多常见的应用中，圆弧开始于当前位置而结束于 P2，但情况并不总是这样。如果当前的位置和圆弧的起点不同，这个方法添加了一条从当前位置到圆弧起点的直线。这个方法总是将当前位置设置为圆弧的终点。 |
| beginPath() | 方法在一个画布中开始子路径的一个新的集合。该方法丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。 | |
| bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y) | cpX1, cpY1 和曲线的开始点（当前位置）相关联的控制点的坐标。 cpX2, cpY2 和曲线的结束点相关联的控制点的坐标。 x, y 曲线的结束点的坐标。 |
在一个画布中开始子路径的一个新的集合。bezierCurveTo()为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点，而结束点是(x,y)。两条贝塞尔曲线控制点(cpX1,cpY1)和(cpX2,cpY2)定义了曲线的形状。当这个方法返回的时候，当前的位置为 (x, y)。 |
| clearRect(x, y, width, height) | x, y 矩形的左上角的坐标。 width, height 矩形的尺寸。 |
删除一个画布的矩形区域。方法擦除了指定的矩形，并且用一个透明的颜色填充它。 |
| clip() | 方法用当前剪切路径来剪切当前路径，然后使用剪切后的路径作为新的剪切路径。注意，没有方法来扩大剪切路径。如果想要一个临时的剪切路径，应该先调用 save() 以便使用 restore() 恢复最初的剪切路径。一个画布的默认剪切路径就是画布的矩形自身。 | |
| closePath() | 方法关闭一条打开的子路径。 如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。 如果子路径已经闭合了，这个方法不做任何事情。 一旦子路径闭合，就不能再为其添加更多的直线或曲线了。要继续向该路径添加，需要通过调用 moveTo() 开始一条新的子路径。 |
|
| createLinearGradient(xStart, yStart, xEnd, yEnd) | xStart, yStart 渐变的起始点的坐标 xEnd, yEnd 渐变的结束点的坐标。 |
创建一条线性颜色渐变。返回一个线性颜色渐变的CanvasGradient对象。 这个方法创建并返回了一个新的 CanvasGradient 对象，它在指定的起始点和结束点之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。使用返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。 var grad=ctx.createLinearGradient(xStart, yStart, xEnd, yEnd); grad.addColorStop(position,color); //position代表渐变中色标的相对位置，0代表开始位置，1代表结束位置 |
| createPattern(image, repetitionStyle) | image 需要贴图的图像。这个参数通常是一个 Image 对象，但是也可以使用一个 Canvas 元素。repetitionStyle 说明图像如何贴图。可能的值如下所示： "repeat" - 在各个方向上都对图像贴图。默认值。 "repeat-x" - 只在 X 方向上贴图。 "repeat-y" - 只在 Y 方向上贴图。 "no-repeat" - 不贴图，只使用它一次。 |
方法为贴图图像创建一个模式。返回表示模式的一个 CanvasPattern 对象。 createPattern() 方法创建并返回一个 CanvasPattern 对象，该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域，可以把一个 CanvasPattern 对象用作 strokeStyle 属性或 fillStyle 属性的值。 |
| createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) | xStart, yStart 开始圆的圆心的坐标。 radiusStart 开始圆的直径。 xEnd, yEnd 结束圆的圆心的坐标。 radiusEnd 结束圆的直径。 |
方法创建一条放射颜色渐变。返回一个放射性颜色渐变的CanvasGradient对象。 这个方法创建并返回了一个新的 CanvasGradient 对象，该对象在两个指定圆的圆周之间放射性地插值颜色。注意，这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。 放射性渐变的绘制方法 使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色，在两个位置之间的圆上插入颜色值（红色、绿色、蓝色和 alpha）。 |
| drawImage(img,x,y[,width,height]) drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) | img：Image 对象，也可以是一个 Canvas 元素 x, y 绘制图像的起始点(绘制的图像的左上角) width,height 绘制的图像按照指定的宽高进行缩放 sourceX, sourceY 图像将要被绘制的区域的左上角 sourceWidth, sourceHeight 图像所要绘制区域的大小 destX, destY 所要绘制的图像区域的左上角的画布坐标 destWidth, destHeight 图像区域所要绘制的画布大小 |
第一个表示把图像按照原始大小或者按照指定的大小压缩并绘制。 第二个表示把图像按照指定的大小裁切并绘制。 在绘制图像时最好使用img.onload=function(){cxt.drawImage();}避免图片没有加载绘制空白。 |
| fill() | 使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径。这一路径的每一条子路径都单独填充。任何未闭合的子路径都被填充，就好像已经对他么调用了 closePath() 方法一样（但是，注意，实际上没有这么让子路径成为闭合的）。 填充一条路径并不会清除该路径。你可以在调用 fill() 之后再次调用 stroke()，而不需要重新定义该路径。 |
|
| fillRect(x,y,width,height) | x, y 矩形的左上角的坐标。 weight, height 矩形的大小。 |
使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形。 |
| fillText(Text,x,y) | Text表示要绘制的文本 x，y表示要绘制文本的位置 |
使用 fillStyle 属性指定的颜色、渐变和模式来绘制指定的文本颜色。 使用strokeText(Text,x,y)方法来指定文本描边效果，并使用strokeStyle属性指定描边的颜色 |
| lineTo(x, y) | 为当前子路径添加一条直线。这条直线从当前点开始，到 (x, y) 结束。当方法返回时，当前点是 (x,y)。 | |
| moveTo(x, y) | 将当前位置设置为 (x, y) 并用它作为第一点创建一条新的子路径。如果之前有一条子路径并且它包含刚才的那一点，那么从路径中删除该子路径。 在当前路径中创建一系列互相不连续的形状，它们都使用同样的绘制参数一起渲染。要分隔开这些形状，请使用 moveTo() 方法，这个方法把当前的位置移动到一个新的位置而不添加一条连接线段。 |
|
| measureText(Text) | 获取有关文本的宽度信息，此方法需要一个文本字符串作为参数，返回一个尺度对象，尺度对象中的数据是基于所提供的字符串参数和当前文本字体的设置而来的。尺度对象只有一个属性width。 | |
| quadraticCurveTo(cpX, cpY, x, y) | cpX, cpY 控制点的坐标。 x, y 曲线终点的坐标。 |
为当前路径添加一条贝塞尔曲线。这条曲线从当前点开始，到 (x,y) 结束。控制点 (cpX,cpY) 说明了这两个点之间的曲线的形状。当 quadraticCurveTo() 方法返回时，当前位置是 (x,y)。 |
| rect(x, y, width, height) | x, y 为矩形的左上角的坐标。 width, height 矩形的大小。 | 为路径添加了一个矩形。这个矩形是路径的一个子路径并且没有和路径中的任何其他子路径相连。 当 rect() 方法返回时，当前位置是 (0,0)。 |
| restore() | 将绘图状态置为保存值。从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。 | |
| rotate(angle) | angle 旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。 | 旋转画布的坐标系统。通过指定一个角度，改变了画布坐标和 Web 浏览器中的 |
| save() | 保存当前图像状态的一份拷贝。把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。 | |
| scale(sx, sy) | sx, sy 水平和垂直的缩放因子。 | 保存当前图像状态的一份拷贝。法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。 |
| stroke() | 绘制当前路径的边框。路径定义的几何线条产生了，但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性。 | |
| strokeRect(x,y,width,height) | x, y 矩形的左上角的坐标。 weight, height 矩形的大小。 |
来绘制一个矩形的边框 |
| translate(dx, dy) | dx, dy 转换的量的 X 和 Y 大小。 | 转换画布的用户坐标系统。为画布的变换矩阵添加水平的和垂直的偏移 |