Canvas的一些相关资料，方法

绘制矩形

可以使用 strokeRect() 和 fillRect() 来绘制矩形的边框和填充矩形。此外，可以使用 clearRect() 来清除矩形所定义的区域。

创建和渲染路径

画布的一项强大功能是，它能够从基本的绘图操作来构建图形，然后，绘制这些图形的框架（勾勒它们）或者给这些图形的内容涂色（填充它们）。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。

为了构建一个多条线段所构成的一个连续的封闭形状，绘制操作之间需要一个连接点。为此，画布保存了一个当前位置。画布绘制操作显式地使用这个位置作为它们的起始点，并且更新它直到到达终点。可以把这看做是使用钢笔或纸来绘画：当您完成了一条具体的线段或曲线，当前位置就是完成这一操作之后钢笔所停留的点。

可以在当前路径中创建一系列互相不连续的形状，它们都使用同样的绘制参数一起渲染。要分隔开这些形状，请使用 moveTo() 方法，这个方法把当前的位置移动到一个新的位置而不添加一条连接线段。当您这么做的时候，就创建了一条新的路径，这是用来表示一组连接起来的操作的画布术语。

一旦您所想要的路径形成了，可以使用 stroke() 绘制其边框，使用 fill() 来绘制其内容；或者两件事都做。

可用的图形操作有：用来绘制直线的 lineTo()，用于绘制矩形的 rect()，用于绘制部分圆形的 arc() 或 arcTo()，以及用于绘制曲线的 bezierCurveTo() 或 quadraticCurveTo()。

除了勾勒和填充，还可以使用当前路径来指定绘制时画布所使用的剪切区域。这个区域中的像素是显示的，区域之外的像素是不显示的。剪切区域是累加性的；调用 clip() 可以将当前路径和当前绘制区域取交集，产生一个新的区域。不幸的是，没有直接的方法把当前的剪切区域设置为画布的范围；要做到这一点，必须保存和恢复画布的整个图形状态。

如果任何子路径中的线段没有形成一个闭合的图形，fill() 和 clip() 操作通过添加一条从子路径的起点到终点的、虚拟（勾勒的时候看不到）线段来闭合它。可选的是，也可以调用 closePath() 来显示地添加这条线段。

 

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()	转换画布的用户坐标系统。

 

转载于:https://my.oschina.net/xiazilailai/blog/312585