内容目录
注意：本文属于《html5 Canvas绘制图形入门详解》系列文章中的一部分。如果你是html5初学者，仅仅阅读本文，可能无法较深入的理解canvas，甚至无法顺畅地通读本文。请点击上述链接以了解使用html5 canvas绘制图形的完整内容。
本文主要介绍Canvas的“画笔”工具——CanvasRenderingContext2D对象的主要属性与方法，详情请参见以下表格(其中，蓝色标注的表示常用属性或方法)：
| 属性或方法 | 基本描述 |
|---|---|
| canvas | 当前CanvasRenderingContext2D对象实例所对应的Canvas对象 |
| globalAlpha | 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。 |
| font | 设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体 |
| lineWidth | 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。 |
| lineCap | 指定线条两端的线帽如何绘制。合法的值是butt、round和square。默认值是butt。你可以点击这里查看lineCap的具体示例，以帮助你更好地理解lineCap。 |
| fillStyle | 用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 |
| strokeStyle | 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 |
| shadowBlur | 指定羽化阴影的程度。默认值是0。 |
| shadowColor | 把阴影的颜色指定为一个CSS字符串或Web样式字符串，并且可以包含一个alpha部分来表示透明度。默认值是black。 |
| textAlign | 设置文本对齐方式。可选的值有start(内容对齐开始边界)、end(内容对齐结束边界)、left(内容向左对齐)、right(内容向右对齐)、center(内容居中对齐)。默认值为start。 |
| beginPath() | 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法，它将重置内存中现有的路径。 |
| moveTo(int x, int y) | 移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点 |
| lineTo(int x, int y) | 使用直线连接当前端点和指定的坐标点(x,y) |
| closePath() | 尝试使用直线连接当前端点和绘制路径的起始端点。如果绘制路径已经关闭(当前图形已被绘出，例如先调用了stroke()或fill()等方法)或者当前绘制路径只有一个点，则它什么都不做。 |
| stroke(int x, int y) | 在Canvas中绘制出当前路径所对应的图形 |
| fillText(string text, int x, int y[, int maxWidth]) | 从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle。 |
| strokeText(string text, int x, int y[, int maxWidth]) | 从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致，不过strokeText()绘制的文字内部是非填充(空心)的，fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle。 |
0 条评论
撰写评论