c.moveTo(10,10);		//在左上方开始
c.lineTo(90,10);		//到达圆角开始点的水平线
c.arcTo(100,10,100,20,10);	//圆角
c.lineTo(100,100);		//到达右下方的垂直线

	beginPath()

	bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)

					参数

	clearRect(x, y, width, height)

					参数

	clip()

	closePath()

提示和注释

注释：不需要在勾勒或填充一条路径之前调用 closePath()。当填充的时候（并且当你调用 clip() 的时候），路径是隐式闭合的。

 

createLinearGradient()

方法创建一条线性颜色渐变。

语法

		createLinearGradient(xStart, yStart, xEnd, yEnd)

参数

 

参数	描述
xStart, yStart	渐变的起始点的坐标。
xEnd, yEnd	渐变的结束点的坐标。

 

返回值

表示一个线性颜色渐变的一个 CanvasGradient 对象。

描述

这个方法创建并返回了一个新的 CanvasGradient 对象，它在指定的起始点和结束点之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。使用返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。

 

createPattern()

方法为贴图图像创建一个模式。

语法

		createPattern(image, repetitionStyle)

参数

参数	描述
image	需要贴图的图像。 这个参数通常是一个 Image 对象，但是也可以使用一个 Canvas 元素。
repetitionStyle	说明图像如何贴图。可能的值如下所示： "repeat" - 在各个方向上都对图像贴图。默认值。 "repeat-x" - 只在 X 方向上贴图。 "repeat-y" - 只在 Y 方向上贴图。 "no-repeat" - 不贴图，只使用它一次。

返回值

表示模式的一个 CanvasPattern 对象。

描述

createPattern() 方法创建并返回一个 CanvasPattern 对象，该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域，可以把一个 CanvasPattern 对象用作 strokeStyle 属性或 fillStyle 属性的值。

 

createRadialGradient()

方法创建一条放射颜色渐变。

语法

		createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

参数

 

参数	描述
xStart, yStart	开始圆的圆心的坐标。
radiusStart	开始圆的直径。
xEnd, yEnd	结束圆的圆心的坐标。
radiusEnd	结束圆的直径。

 

返回值

表示一个放射性颜色渐变的一个 CanvasGradient 对象。

描述

这个方法创建并返回了一个新的 CanvasGradient 对象，该对象在两个指定圆的圆周之间放射性地插值颜色。注意，这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。

放射性渐变的绘制方法

使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色，在两个位置之间的圆上插入颜色值（红色、绿色、蓝色和 alpha）。

 

drawImage()

方法绘制一幅图像。

语法

		drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
          destX, destY, destWidth, destHeight)

参数

 

参数	描述
image	所要绘制的图像。 这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。
x, y	要绘制的图像的左上角的位置。
width, height	图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。
sourceX, sourceY	图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。
sourceWidth, sourceHeight	图像所要绘制区域的大小，用图像像素表示。
destX, destY	所要绘制的图像区域的左上角的画布坐标。
destWidth, destHeight	图像区域所要绘制的画布大小。

 

描述

drawImage() 方法有 3 个变形。第一个变形把整个图像复制到画布，将其放置到指定点的左上角，并且将每个图像像素映射成画布坐标系统的一个单元。第二个变形也把整个图像复制到画布，但是允许您用画布单位来指定想要的图像的宽度和高度。第三个变形则是完全通用的，它允许您指定图像的任何矩形区域并复制它，对画布中的任何位置都可进行任何的缩放。

传递给 drawImage() 方法的图像必须是 Image 对象或 Canvas 元素。一个 Image 对象能够表示文档中的一个 <img> 标记或者使用 Image() 构造函数所创建的一个屏幕外图像。

 

fill()

方法填充路径。

语法

		fill()

描述

fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径。这一路径的每一条子路径都单独填充。任何未闭合的子路径都被填充，就好像已经对他么调用了 closePath() 方法一样（但是，注意，实际上没有这么让子路径成为闭合的）。

画布使用“非零匝数规则”来确定哪个点在路径的内部，而哪个点在路径的外部。这一规定的细节超出了本参考页的范围，但是，它们通常只和那些与自身相交的复杂路径相交。

填充一条路径并不会清除该路径。你可以在调用 fill() 之后再次调用 stroke()，而不需要重新定义该路径。

 

fillRect()

方法填充一个矩形。

语法

		fillRect(x, y, weight, height)

参数

 

参数	描述
x, y	矩形的左上角的坐标。
weight, height	矩形的大小。

 

描述

fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形。

fillRect() 方法的当前实现还清除了路径，就好像 beginPath() 已经调用了。这一令人惊讶的行为可能不会标准化，因此不应该指望它。

 

lineTo()

方法为当前子路径添加一条直线。

语法

		lineTo(x, y)

参数

 

参数	描述
x, y	直线的终点的坐标。

 

描述

lineTo() 方法为当前子路径添加一条直线。这条直线从当前点开始，到 (x, y) 结束。当方法返回时，当前点是 (x,y)。

 

moveTo()

方法设置当前位置并开始一条新的子路径。

语法

		moveTo(x, y)

参数

 

参数	描述
x, y	新的当前点的坐标。

 

描述

moveTo() 方法将当前位置设置为 (x, y) 并用它作为第一点创建一条新的子路径。如果之前有一条子路径并且它包含刚才的那一点，那么从路径中删除该子路径。

 

quadraticCurveTo()

方法为当前路径添加一条贝塞尔曲线。

语法

		quadraticCurveTo(cpX, cpY, x, y)

参数

 

参数	描述
cpX, cpY	控制点的坐标。
x, y	曲线终点的坐标。

 

描述

quadraticCurveTo() 方法为当前的子路径添加一条贝塞尔曲线。这条曲线从当前点开始，到 (x,y) 结束。控制点 (cpX,cpY) 说明了这两个点之间的曲线的形状（贝塞尔曲线的数学原理超过了本参考页的范围）。

当 quadraticCurveTo() 方法返回时，当前位置是 (x,y)。

 

rect()

方法为当前路径添加一条矩形子路径。

语法

		quadraticCurveTo(x, y, width, height)

参数

 

参数	描述
x, y	矩形的左上角的坐标。
width, height	矩形的大小。

 

描述

rect() 方法为路径添加了一个矩形。这个矩形是路径的一个子路径并且没有和路径中的任何其他子路径相连。

当 rect() 方法返回时，当前位置是 (0,0)。

 

restore()

方法将绘图状态置为保存值。

语法

		restore()

描述

restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。

请参阅 save() 方法了解更多信息。

 

rotate()

方法旋转画布的坐标系统。

语法

		rotate(angle)

参数

 

参数	描述
angle	旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。

 

描述

rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意，这个角度是用弧度指定的。

提示：如需把角度转换为弧度，请乘以 Math.PI 并除以 180。

 

save()

方法保存当前图像状态的一份拷贝。

语法

		save()

描述

save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。

一个画布的图形状态包含了 CanvasRenderingContext2D 对象的所有属性（除了只读的画布属性以外）。它还包含了一个变换矩阵，该矩阵是调用 rotate()、scale() 和 translate() 的结果。另外，它包含了剪切路径，该路径通过 clip() 方法指定。可是要注意，当前路径和当前位置并非图形状态的一部分，并且不会由这个方法保存。

 

scale()

方法标注画布的用户坐标系统。

语法

		scale(sx, sy)

参数

 

参数	描述
sx, sy	水平和垂直的缩放因子。

 

描述

scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。

 

stroke()

方法绘制当前路径。

语法

		stroke()

描述

stroke() 方法绘制当前路径的边框。路径定义的几何线条产生了，但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性。

术语“勾勒”，指的是钢笔或笔刷的画笔。它意味着“画......轮廓”。和 stroke() 方法相对的是 fill()，该方法会填充路径的内部区域而不是勾勒出路径的边框。

 

strokeRect()

方法用于在单选按钮上模拟一次鼠标点击：

语法

		strokeRect(x, y, width, height)

描述

该方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部）。线条颜色和线条宽度由 strokeStyle 和 lineWidth 属性指定。矩形边角的形状由 lineJoin 属性指定。

strokeRect() 的当前实现会清晰化路径，就好像 已经调用过了。这一令人吃惊的行为可能不会标准化，所以不能指望它。

 

translate()

方法转换画布的用户坐标系统。

语法

		translate(dx, dy)

参数

 

参数	描述
dx, dy	转换的量的 X 和 Y 大小。

 

描述

translate() 方法为画布的变换矩阵添加水平的和垂直的偏移。参数 dx 和 dy 添加给后续定义路径中的所有点。

 

例子：https://developer.mozilla.org/cn/Canvas_tutorial/Basic_animations