正文
[HTML5 Canvas学习] 基础知识
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML5 canvas元素通过脚本语言（通常是Javascript) 绘制图形, 它仅仅是一个绘图环境，需要通过getContext('2d')方法获得绘图环境对象，使用绘图环境对象在canvas元素上进行绘制。
getContext('2d')获得的对象时CanvasRenderingContext2D对象，它所包含的属性如下：
| 属性 | 简介 |
| canvas | 指向该绘图环境所属的canvas对象。该属性最常见的用途是通过它来获取canvas的宽度和高度，分别调用context.canvas.width 和context.canvas.height即可。 |
| fillstyle | 指定该绘图环境在后续的图形填充操作中所使用的颜色、渐变色或图案。 |
| font | 设定在调用绘图环境对象的fillText()或strokeText()方法时，所使用的字形。 |
| globalAlpha | 全局透明度设定，它可以取0 ~ 1.0之间的值。浏览器会将每一个像素的alpha值与该值相乘，在绘制图像时也是如此。 |
| globalCompsiteOperation | 该值决定了浏览器将某个物体绘制在其他物体之上时，所采用的绘制方式。 |
| lineCap | 该值告诉浏览器如何绘制线段的端点，可以在以下三个值中指定一个：butt、round及square。默认值是butt |
| lineWidth | 该值决定了在canvas之中绘制线段的屏幕像素宽度。它必须是一个非负、非无穷的double值。默认值是1.0 |
| lineJoin | 告诉浏览器在两条线段相交时如何绘制焦点。可取的值是：bevel、round、miter。默认值是miter |
| miterLimit | 告诉浏览器如何绘制miter形式的线段焦点。 |
| shadowBlur | 该值决定了浏览器如何延伸阴影效果。值越高，阴影效果延伸得就越远。该值不是指阴影的像素长度，而是代表高斯模糊方程式中的参数值。 |
| shadowColor | 该值告诉浏览器使用何种颜色来绘制阴影。通常采用半透明作为该属性的值，以便让后面的背景能显示出来。 |
| shadowOffsetX | 以像素为单位，指定了阴影效果的水平方向偏移量。 |
| shadowOffsetY | 以像素为单位，指定了阴影效果的垂直方向偏移量。 |
| strokeStyle | 指定了对路径进行描边时所用的绘制风格。该值可被设定为某个颜色、渐变色或图案。 |
| textAlign | 决定了以fillText()或strokeText()方法进行绘制时，所画文本的水平对齐方式。 |
| textBaseline | 决定了以fillText()或strokeText()方法进行绘制时，所画文本的垂直对齐方式。 |
包含方法如下：
| save() |
将当前canvas的状态推送到一个保存canvas状态的堆栈顶部。canvas状态包括了当前的坐标变换(transformation)信息、剪辑区域(cliping region)以及所有canvas绘图环境对象的属性。 包括了strokeStyle、fillStyle与globalCompositeOperation等 |
| restore() | 将canvas状态堆栈顶部的条目弹出。原来保存于栈顶的那一组状态，在弹出之后，就被设置成canvas当前的状态了。 |
|
clearRect(double x, double y, double w, double h) |
将指定矩形与当前剪辑区域相交范围内的所有像素清除。 |
|
strokeRect(double x, double y, double w, double h) |
使用如下属性，为指定的矩形描边： strokeStyle、lineWidth、lineJoin、miterLimit |
| fillRect(double x, double y, double w, double h) | 使用fillStyle属性填充指定的矩形。 |
| CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1) | 创建线性渐变 |
| CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1) | 创建放射渐变 |
| arc() | 在当前路径中增加一段表示圆弧或圆形的子路径。可以通过一个boolean参数来控制该段子路径的方向。如果此参数是true, 那么arc()所创建的子路径就是逆时针，否则是顺时针。 |
| beginPath() | 将当前路径之中的所有子路径都清除掉，以此来重置当前路径。 |
| closePath() | 显式地封闭某段开放路径。 |
| fill() | 使用fillStyle对当前路径的内部进行填充。 |
| rect(double x, double y, double w, double h) | 在坐标(x, y)处建立一个宽度为w， 高度为h的矩形子路径。该子路径一定是封闭的，而且总是按顺时针方向来创建的。 |
| stroke() | 使用strokeStyle来描绘当前路径的轮廓线。 |
| moveTo(x, y) | 向当前路径中增加一条子路径，该子路径只包含一个点，就是由参数传入的那个点。该方法并不会从当前路径中清除任何子路径。 |
| lineTo(x, y) | 如果当前路径中没有子路径，那么这个方法的行为与moveTo()方法一样。如果当前路径中存在子路径，那么该方法会将你所指定的那个点加入路径中。 |
| quadraticCurveTo(double cpx, double cpy, double x, double y) | 创建一条表示二次方贝赛尔曲线的路径。该方法需要传入两个点，第一个是曲线的控制点，第二个点是锚点。 |
| bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y) | 创建一条代表三次方贝赛尔曲线的路径。该方法传入三个点的坐标，前两点是该曲线的控制点，最后一个点是锚点。 |
