Web前端开发技术与实践 第18章：绘图 阮晓龙 /

Presentation on theme: "Web前端开发技术与实践 第18章：绘图 阮晓龙 /"— Presentation transcript:

1 Web前端开发技术与实践 第18章：绘图 阮晓龙 13938213680 / rxl@hactcm.edu.cn
河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9

2 本章主要内容 Canvas基础知识 图形绘制 图形变换与控制 案例：用Canvas绘制统计报表

3 1.Canvas基础知识 基本原理 Canvas元素在页面上提供一块像画布一样无色透明的区域，可通过Javascript脚本绘制图形。
在HTML页面上定义Canvas元素除了可以指定id、style、class、hidden等通用属性之外，还可以指定以下2个属性： height：设置画布组件的高度。 width：设置画布组件的宽度。

4 1.Canvas基础知识 在画布上绘制图形必须经过以下三个步骤： 获取Canvas对应的DOM对象，得到一个Canvas对象。
调用Canvas对象的getContext()方法，得到CanvasRenderingContext2D对象­（可绘制图形）。 调用CanvasRenderingContext2D对象方法绘图。

5 1.Canvas基础知识 Canvas API Canvas API通过调用Canvas对象的getContext()方法获得图形对象。
调用传入参数【2d】，返回的CanvasRenderingContext2D对象就是Canvas API对象实例，叫做2D渲染上下文。

6 1.Canvas基础知识 1.2绘图方法 常见的绘图方法如下：

7

8 1.Canvas基础知识 1.3绘图属性 CanvasRenderingContext2D属性功能用法如下：

9

10 2.图形绘制 CanvasRenderingContext2D提供了fillRect() 和strokeRect()这2个绘制矩形的方法：
2.1矩形 CanvasRenderingContext2D提供了fillRect() 和strokeRect()这2个绘制矩形的方法： fillRect(float x, float y, float width, float height)：用于填充一个矩形区域，前两个参数x、y定义该矩形区域的起点坐标，决定了矩形的位置；width定义矩形区域的宽度；height定义矩形区域的高度。 strokeRect(float x, float y, float width, float height)：用于绘制一个矩形边框，也就是用线条绘制出矩形的轮廓参数，功能和上一个方法相同。

11 2.图形绘制 线条 线条在Canvas绘图中被称为路径。 在Canvas上使用路径的步骤如下：
2.2线条 线条 线条在Canvas绘图中被称为路径。 在Canvas上使用路径的步骤如下： 定义路径，调用CanvasRenderingContext2D对象的beginPath()方法； 定义子路径，可以使用的方法有arc()、arcTo()、bezierCurveTo()、lineTo()、moveTo()、quadraticCurveTo()、rect()； 关闭路径，调用CanvasRenderingContext2D对象的closePath()方法； 填充路径或绘制路径，调用CanvasRenderingContext2D对象的fill()方法或stroke()方法。

12 2.图形绘制 CanvasRenderingContext2D绘制线条方法介绍如下：
2.2线条 CanvasRenderingContext2D绘制线条方法介绍如下： moveTo (float x, float y)：把Canvas的当前路径结束点移动到x、y对应的点； lineTo (float x, float y)：把Canvas的当前路径从当前结束点连接到x、y的对应点。

13 2.图形绘制 多边形 CanvasRenderingContext2D只提供了绘制矩形的方法，要使用路径才能绘制复杂的几何图形。
2.3多边形 多边形 CanvasRenderingContext2D只提供了绘制矩形的方法，要使用路径才能绘制复杂的几何图形。 正多边形中心点为（dx，dy），外圆半径为size，边数为n，相邻两定点与中心点形成的角的弧度为2 * Math.PI / n。

14 2.图形绘制 2.4圆角矩形 圆角矩形 通过CanvasRenderingContext2D绘制矩形的方法，设置lineJoin = "round"可以向画布添加圆角矩形，但矩形的圆角不可控制。 CanvasRenderingContext2D使用arcTo()方法绘制可控的圆角矩形。 arcTo(float x1, float y1, float x2, float y2, float radius)：向Canvas的当前路径上添加一段圆弧。 arcTo()方法确定一段圆弧的方式是：假设从当前点到P1(x1,y1)绘制一条线段，再从P1(x1,y1)到P2(x2,y2)绘制一条线段，arcTo()则绘制一端同时与上面两条线段相切，且半径为radius的圆弧。

15 2.图形绘制 圆形 绘制圆形同样需要在Canvas上启用路径，通过路径绘制图形。
2.5圆形 圆形 绘制圆形同样需要在Canvas上启用路径，通过路径绘制图形。 CanvasRenderingContext2D绘制圆形的方法如下： arc(float x, float y, float radius, float startAngel, float endAngel, boolen antclockwise)：用于向当前路径添加一段圆弧。 圆心坐标为（x，y），半径为radius，开始角度为startAngel，结束角度为endAngel。startAngel、endAngel以为单位，counterclockwise是否为逆时针方向。

16 2.图形绘制 2.6曲线 曲线 CanvasRrenderingContext2D提供了bezierCurveTo()和quadraticCurveTo()两个方法，可以向Canvas的当前路径上添加复杂的曲线。 两种方法的区别与联系如下： bezierCurveTo()和quadraticCurveTo()都是贝塞尔曲线，bezierCurveTo()是一种三次贝塞尔曲线，quadraticCurveTo()是一种二次贝塞尔曲线。

17 2.图形绘制 2.6曲线 两种方法的功能和属性用法如下： bezierCurveTo(float cpX1, float cpY1, float cpX2, float cpY2, float x, float y)：向Canvas的当前路径添加一段贝塞尔曲线。贝塞尔曲线起点为当前点，终点为（x，y），第一个控制点坐标为（cpX1，cpY1），第二个控制点坐标为(cpX3，cpY2)。 quadraticCurveTo(float cpX, float cpY, float x, float y)：向Canvas当前路径添加一段二次曲线。

18 2.图形绘制 文字 Canvas不仅能绘制图形，还能够显示文本。
2.7文字 文字 Canvas不仅能绘制图形，还能够显示文本。 Canvas中的文本是以图像形式绘制的，一旦文字绘制之后，就无法编辑，除非先擦除文字，再重新绘制。 CanvasRenderingContext2D提供的绘制文字的方法功能用法如下： void fillText(string text, float x, float y[, float maxWidth])：用于填充字符串。 void strokeText(string text, float x, float y[, float maxWidth]))：用于绘制字符串边框。

19 现场演示： 案例18-08：绘制文字 案例18-09：文字textAlign属性 案例18-10：文字textBaseAlign属性

20 2.图形绘制 绘制图像 绘制图像时，需使用drawImage方法，CanvasRenderingContext2D为绘位图提供了三种用法：
2.8图像 绘制图像 绘制图像时，需使用drawImage方法，CanvasRenderingContext2D为绘位图提供了三种用法： void drawImage(image image, float x, float y)：直接绘制，用于把image绘制到（x，y）处，不会对图片做任何缩放处理，绘制出来的图片保持原来的大小。 void drawImage(image image, float x, float y, float width, float height)：绘制并指定大小，该方法按照指定大小（width、height）把image绘制到（x，y）处。 void drawImage(image image, integer sx, integer sy, integer sw, integer sh, float dx, float dy, float dw, float dh)：从画布中已经画好的图像上复制全部或局部到画布的另一位置。

21 2.图形绘制 图像平铺 图像平铺就是用图像将画布填满，是绘制图像的一个重要功能。 实现平铺技术有两种方法：
2.8图像 图像平铺 图像平铺就是用图像将画布填满，是绘制图像的一个重要功能。 实现平铺技术有两种方法： 一种是使用前面所介绍的drawImage()方法。 另一种实现平铺效果方法是CanvasRenderingContext2D的createPattern方法。

22 现场演示： 案例18-12：drawImage平铺 案例18-13：createPatternTile平铺

23 2.图形绘制 图像裁剪 使用Canvas绘制图像时，经常只需要保留图像的一部分，使用Canvas API自带的图像裁剪功能可以实现这一功能。
2.8图像 图像裁剪 使用Canvas绘制图像时，经常只需要保留图像的一部分，使用Canvas API自带的图像裁剪功能可以实现这一功能。 使用CanvasRenderingContext2D的clip方法实现Canvas元素的图像裁剪功能，具体步骤如下： 将需要从图像上裁剪的区域定义成Canvas上的路径。 调用ConvasRenderingContext2D的clip()方法把路径裁剪下来。 绘制图像，只有被clip()方法裁剪的路径覆盖的部分才会被显示出来。

24 2.图形绘制 像素处理 Canvas API能获取图像中的每一个像素，得到该像素的RGBA值。
2.8图像 像素处理 Canvas API能获取图像中的每一个像素，得到该像素的RGBA值。 使用图形上下文对象的getImageData方法来获取图像中的像素，该方法的定义如下： var imageData = context.getImageData(sx, sy. sw, sh)：sx，sy分别表示获取区域的起点横坐标、起点纵坐标，sw、sh分别表示所获取区域宽度和高度。 context.putImageData(imagedata, dx, dy[, dirtyX, dirty, dirtyWidth, dirtyHeight])：imageData为前面所述的像素数组，dx、dy分别表示重绘图像的起点横坐标、起点纵坐标。

25 2.图形绘制 2.8图像 位图输出 当程序CanvasRenderingContext2D通过CanvasRenderingContext2D在Canvas上绘图完成后，通常会需要将该图形或图像输出保存到文件中，可以调用Canvas提供的toDataURL()方法输出位图。 toDataURL方法的用法如下： toDataURL(string type)：该方法把Canvas对应的位图编码成DataURL格式的字符串。其中参数type是一个形如image/png格式的MIME字符串。

26 3.图形变换与控制 3.1坐标变换 坐标变换 CanvasRenderingContext2D提供坐标变换支持，通过使用坐标变换，Web前端开发者无须繁琐地计算每个点的坐标，只需对坐标系统进行整体变换即可。 CanvasRenderingContext2D支持的坐标变换有平移、缩放和旋转三种操作，对应的方法分别为translate()，scale()和rotate()： translate(float dx, foat dy)：用作平移坐标系统。 scale(float sx, float sy)：缩放坐标系统。 rotate(float angle)：旋转坐标系统。

27 3.图形变换与控制 CanvasRenderingContext2D提供两种方法来保存、恢复绘图状态： save()：保存当前的绘图状态。
3.1坐标变换 CanvasRenderingContext2D提供两种方法来保存、恢复绘图状态： save()：保存当前的绘图状态。 restore()：恢复之前保存的绘图状态。

28 现场演示： 案例18-17：平移 案例18-18：缩放 案例18-19：旋转 案例18-20：坐标变换综合使用

29 3.图形变换与控制 3.2矩阵变换 矩阵变换 矩阵变换是CanvasRenderingContext2D提供的一个更通用的坐标变换方法transform()。 矩阵变换方法的具体使用方法如下： transform(m11, m12, m21, m22, dx, dy)：这是一个基于矩阵的变换方法。其中前4个参数组成变换矩阵；dx, dy负责对坐标系统进行平移。

30 3.图形变换与控制 设置阴影 阴影是图形展示中不可或缺的效果，经常在Web和图形设计中使用。
3.3设置阴影 设置阴影 阴影是图形展示中不可或缺的效果，经常在Web和图形设计中使用。 在画布中创建阴影效果是相对较简单的，它可以通过4个全局属性进行控制，具体如下： shadowBlur：设置阴影的模糊度。 shadowColor：设置阴影的颜色。 shadowOffsetX：设置阴影X方向的偏移。 shadowOffsetY：设置阴影Y方向的偏移。

31 3.图形变换与控制 叠加风格 CanvasRebderingContext2D绘图时，后面绘制的图形会默认完全覆盖在前面绘制的图形。
3.4叠加风格 叠加风格 CanvasRebderingContext2D绘图时，后面绘制的图形会默认完全覆盖在前面绘制的图形。 特殊情况下需要其他叠加风格，可修改CanvasRebderingContext2D的globalCompositeOperation属性来实现。

32 3.图形变换与控制 3.4叠加风格 globalCompositeOperation各属性如表所示：

33 3.图形变换与控制 线性渐变 线性渐变方法的具体使用方法如下所示：
3.5填充风格 线性渐变 线性渐变方法的具体使用方法如下所示： createLinearGradient(float xStart, float yStart, float xEnd, float yEnd)：四个参数分别表示渐变开始横坐标、渐变开始纵坐标、渐变结束横坐标、渐变结束纵坐标。

34 3.图形变换与控制 线性渐变 线性渐变使用步骤如下所示：
3.5填充风格 线性渐变 线性渐变使用步骤如下所示： 调用CanvasRenderingContext2D的createLinearGradient(float xStart, float yStart, float xEnd, float yEnd)方法创建一个线性渐变，该方法返回一个CanvasGradient对象。 调用CanvasGradient对象的addColorStop(float offset, string color)方法向线性渐变中添加颜色。 将CanvasGradient对象赋值给CanvasRenderingContext2D的fillStyle或strokeStyle属性。

35 3.图形变换与控制 圆形渐变 圆形渐变使用createRadialGradient()方法。
3.5填充风格 圆形渐变 圆形渐变使用createRadialGradient()方法。 createRadialGradient(float xstart, float ystart, float radiusStart, float xEnd, float yEnd, float radiusEnd)： xStart、yStart控制渐变开始的圆圈圆心。 radiusStart控制开始圆圈的半径。 xEnd、yEnd控制渐变结束圆圈的圆心。 radiusEnd控制结束圆圈的半径。

36 3.图形变换与控制 位图填充 Canvas提供了CanvasPattern对象用于实现位图填充，位图填充方式有填充背景和填充边框2种：
3.5填充风格 位图填充 Canvas提供了CanvasPattern对象用于实现位图填充，位图填充方式有填充背景和填充边框2种： 填充背景已经在前面使用createPattern()方法实现图像平铺中应用； CanvasPattern对象既可赋值给strokeStyle属性作为（作为几何形状的边框），也可以赋值给fillStyle树形（作为集合形状的填充）。

37 现场演示： 案例18-24：线性渐变 案例18-25：圆形渐变 案例18-26：位图填充

38 4.案例：用Canvas绘制统计报表 本例将综合使用文本、矩形、圆以及渐变、叠加等效果绘制“某网站用户访问来源分布饼状图”。
预期实现效果如下图所示：

39 现场演示： 案例18-27：某网站用户访问来源

40 Thanks.