首页 > 代码库 > 6月6号=》80页-100页
6月6号=》80页-100页
4.1 使用canvas元素
HTML5新增了一个<canvas>元素，该元素专门用于绘制图形。但实际上，<canvas>元素自身并
不会绘制图形，它只是相当于一张空画布。如果开发者需要向<canvas>上绘制图形，则必须使用JavaScript
脚本进行绘制。
<canvas>元素可以指定如下两个属性。
height：该属性设置该画布组件的高度。
width：该属性设置该画布组件的宽度。
为了在<canvas>元素上绘图，必须经过如下3步：
(1)：获取<canvas>元素对应的DOM对象，这是一个Canvas对象。
(2)：调用Canvas对象的getContext(String contextID)该方法返回一个绘图API，该方法需要一个字符串
参数，目前该方法只支持"2d"字符串作为参数，该方法返回一个CanvasRenderingContext2D对象。
(3)：调用CanvasRenderingContext2D对象的方法绘图。
为了在<canvas>元素上使用路径，必须经过如下4步：
(1)：调用CanvasRenderingContext2D对象的beginPath()方法开始定义路径。
(2)：调用CanvasRenderingContext2D的各种方法添加子路径。
(3)：调用CanvasRenderingContext2D的closePath()方法关闭路径。
(4)：调用CanvasRenderingContext2D的fill()或stroke()方法来填充路径或绘制路径边框。
4.2 绘图
4.2.1 canvas绘图基础：CanvasRenderingContext2D
HTML5绘图的组件是Canvas对象，但绘图的核心API是CanvasRenderingCOntext2D。
该对象提供了如下所示的方法绘制各种图形：
| 方法签名 | 简要说明 |
| void arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterclockwise) | 向Canvas的当前路径上添加一段弧。绘制以x、y为圆心，radius为半径，从startAngle角度开始，到endAngle角度结束的圆弧。startAngle、endAngle以弧度作为单位 |
| void arcTo(float x1,float y1,float x2,float y2,float radius) | 向Canvas的当前路径上添加一段弧。与前一个方法相比，只是定义弧的方式不同 |
| void beginPath() | 开始定义路径 |
| void closePath() | 关闭前面定义的路径 |
| void bezierCurveTo(float cpX1,float cpY1,float cpX2,float cpY2,float x,float y) | 向Canvas的当前路径上添加一段贝济埃曲线 |
| void clearRect(float x,float y,float width,float height) | 擦除指定矩形区域上绘制的图形 |
| void clip() | 从画布上剪裁一块出来 |
| CanvasGradient createLinearGradient(float xStart,float yStart,float xEnd,float yEnd) | 创建一个线性渐变 |
| CanvasPattern createPattern(Image image,String style) | 创建一个图形平铺 |
| CanvasGradient createRadialGradient(float xStart,float yStartfloat radiusStart, float xEnd,float yEnd,float radiusEnd) | 创建一个圆形渐变 |
| void drawImage(Image image,float x,float y) | 把image绘制到x、y处。该方法不会对图片做任何缩放处理，绘制出来的图片保持原来的大小。 |
| void drawImage(Image image,float x,float y,float width,float height) | 把image绘制到x、y处。该方法会对图片进行缩放，绘制出来的图片宽为width，高为height。 |
| void drawImage(Image image,integer sx,integer sy,ineger sw,integer sh,float dx,float dy,float dw,float dh) | 该方法将会从image上"挖出"一块来绘制到Canvas上。其中sx、sy两个参数控制从源图片上的哪个位置开始挖取，sw、sh两个参数控制从源图片上挖取的宽度、高度；dx、dy两个参数控制把挖取的图片绘制到Canvas的哪个位置，而dw、dh则控制对绘制图片进行缩放，绘制出来的图宽为dw，高为dh。 |
| void fill() | 填充Canvas的当前路径 |
| void fillRect(float x,float y,float width,float height) | 填充一个矩形区域 |
| void fileText(String text,float x,float y,[float max Width]) | 填充字符串 |
| void lineTo(float x,float y) | 把Canvas的当前路径从当前结束点连接到x、y对应的点 |
| void moveTo(float x,float y) | 把Canvas的当前路径的结束点移动到x、y对应的点 |
| void quadraticCurveTo(float cpX,float cpY,float x,float y) | 向Canvas的当前路径上添加一段二次曲线，其中cpX、cpY、定义控制点的坐标。 |
| void rect(float x,float y,float width,float height) | 向Canvas的当前路径上添加一个矩形 |
| void stroke() | 沿着Canvas的当前路径绘制边框 |
| void strokeRect(float x,float y,float width,float height) | 绘制一个矩形边框 |
| void strokeText(String text,float x,float y,[float maxWidth]) | 绘制字符串的边框 |
| void save() | 保存当前的绘图状态。save()方法保存的绘图状态，不仅包括当前坐标系统的状态，也包括CanvasRenderingContext2D所设置的填充风格、线条风格、阴影风格的各种绘图状态。单save()方法不会保存当前Canvas上绘制的图形。 |
| void restore() | 恢复之前保存的绘图状态 |
| void rotate(float angle) | 旋转坐标系统。该方法控制系统旋转angle弧度。在旋转后的坐标系统上绘制图形时，所有坐标点的X、Y坐标都相当于旋转了angle弧度之后的坐标。 |
| void scale(float sx,float sy) | 缩放坐标系统。该方法控制坐标系统水平方向上缩放sx，垂直方向上缩放sy。在缩放后的坐标系统上绘制图形时，所有坐标点的X坐标都相当于乘以了sx因子，所有点的Y坐标都相当于乘以了sy因子。 |
| void translate(float dx,float dy) | 平移坐标系统。该方法相当于把原来位于(0,0)位置的坐标原点平移到(dx,dy)点。在平移后的坐标系统上绘制图形时，所有坐标点的X坐标都相当于增加了dx，所有点的Y坐标都相当于增加了dy。 |
| void transform(m11,m12,m21,m22,dx,dy) | 这是一个基于矩阵变换的方法。其中前4个参数将组成变换矩阵；dx、dy将负责对坐标系统进行平移。变换前每个点(x,y)与该矩阵相乘后得到变换后该点的坐标。
提示：通过transform()方法进行坐标变换比较复杂。使用前3个方法就可以完成的坐标变换，就没有必要使用transform()来进行坐标变换了。 |
该对象提供了如下属性：
| 属性名 | 简要说明 |
| fillStyle | 设置填充路径时所用的填充风格。该属性支持3种类型的值： 1：符合颜色格式的字符串值，表明使用纯色填充。 2：CanvasGradient，表明使用渐变填充。 3：CanvasPattern，表明使用位图填充。 |
| strokeStyle | 设置绘制路径时所用的填充风格。该属性支持3种类型的值： 1：符合颜色格式的字符串值，表明使用纯色填充。 2：CanvasGradient，表明使用渐变填充。 3：CanvasPattern，表明使用位图填充。 |
| font | 设置绘制字符串时所用的字体 |
| globalAlpha | 设置全局透明度 |
| globalCompositeOperation | 设置全局的叠加效果 |
| lineCap | 设置线段端点的绘制形状。该属性支持如下3个值： 1："butt",该属性值指定不绘制端点。线条结尾处直接结束。这是默认的属性值 2："round",该属性值指定绘制圆形端点。线条结尾处绘制一个直径为线条宽度的半圆 3："square",该属性值指定绘制方形端点。线条结尾处绘制半个边长为线条宽度的正方形。需要说明的是，这种形状的端点与"butt"形状的端点十分相似，只是采用这种形式的端点的线路略长一点而已 |
| lineJoin | 设置线条连接点的风格。该属性支持如下3个值： 1："meter",这是默认的属性值。该方格的连接点形状如(右锐角箭头[偏长]) 2："round",该方格的连接点形状如(右锐角箭头[偏中]) 3："bevel",该方格的连接点形状如(右锐角箭头[偏短]) |
| miterLimit | 当把lineJoin属性设为meter风格时，该属性控制锐角箭头的长度 |
| lineWidth | 设置笔触线条的宽度 |
| shadowBlur | 设置阴影的模糊度。该属性值是一个浮点数，该数值越大，阴影的模糊程度就越大。 |
| shadowColor | 设置阴影的颜色 |
| shadowOffsetX | 设置阴影在X方向的偏移 |
| shadowOffsetY | 设置阴影在Y方向的偏移 |
| textAlign | 设置绘制字符串的水平对齐方式，该属性支持start、end、left、right、center等属性值 |
| textBaseAlign | 设置绘制字符串的垂直对齐方式，该属性支持top、hanging、middle、alphabetic、idecgraphic、buttom等属性值 |
4.4 控制叠加风格
Canvas对象绘制的图形可以形成"叠加"效果，在默认情况下，后面绘制的图形将会完全覆盖前面
绘制的图形。这种情况能解决大部分的绘制情况，但在某些特殊情况下，我们还需要其他的叠加风格，
这可通过修改CanvasRenderingContext2D的globalCompositeOperation属性来实现。
该属性支持如下几个属性值：
source-over：新绘制的图形将会显示在顶层，覆盖以前绘制的图形。这是默认的行为。
destination-over：新绘制的图形将放在原图形的后面。
source-in：新绘制的图形与原图形做in运算，只显示新图形与原图形重叠的部分，新图形
与原图形的其他部分都变成透明的。
destination-in：原图形与新绘制的图形做in运算，只显示原图形与新图形重叠的部分，新
图形与原图形的其他部分都变成透明的。
source-out：新绘制的图形与原图形做out运算，只显示新图像与原图形不重叠的部分，新
图形与原图形的其他部分都变成透明的。
destination-out：原图形与新绘制的图形做out运算，只显示原图形与新图像不重叠的部分，
新图形与原图形的其他部分都变成透明的。
source-atop：只绘制新图像与原图形重叠部分和原图形未被覆盖的部分。新图形的其他部分
变成透明的。
destination-atop：智慧值原图形与新图形重叠部分和新图形未重叠的部分。原图形的其他
部分变成透明的。不绘制新图形的重叠部分。
lighter：新图形和原图形都绘制。重叠部分绘制两种颜色值相加的颜色。
xor：绘制新图形与原图形不重叠部分，重叠部分变成透明的。
copy：只绘制新图形。原图形变成透明的。