Web前端开发技术与实践 第18章:绘图 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.book.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9
本章主要内容 Canvas基础知识 图形绘制 图形变换与控制 案例:用Canvas绘制统计报表
1.Canvas基础知识 基本原理 Canvas元素在页面上提供一块像画布一样无色透明的区域,可通过Javascript脚本绘制图形。 在HTML页面上定义Canvas元素除了可以指定id、style、class、hidden等通用属性之外,还可以指定以下2个属性: height:设置画布组件的高度。 width:设置画布组件的宽度。
1.Canvas基础知识 在画布上绘制图形必须经过以下三个步骤: 获取Canvas对应的DOM对象,得到一个Canvas对象。 调用Canvas对象的getContext()方法,得到CanvasRenderingContext2D对象(可绘制图形)。 调用CanvasRenderingContext2D对象方法绘图。
1.Canvas基础知识 Canvas API Canvas API通过调用Canvas对象的getContext()方法获得图形对象。 调用传入参数【2d】,返回的CanvasRenderingContext2D对象就是Canvas API对象实例,叫做2D渲染上下文。
1.Canvas基础知识 1.2绘图方法 常见的绘图方法如下:
1.Canvas基础知识 1.3绘图属性 CanvasRenderingContext2D属性功能用法如下:
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):用于绘制一个矩形边框,也就是用线条绘制出矩形的轮廓参数,功能和上一个方法相同。
2.图形绘制 线条 线条在Canvas绘图中被称为路径。 在Canvas上使用路径的步骤如下: 2.2线条 线条 线条在Canvas绘图中被称为路径。 在Canvas上使用路径的步骤如下: 定义路径,调用CanvasRenderingContext2D对象的beginPath()方法; 定义子路径,可以使用的方法有arc()、arcTo()、bezierCurveTo()、lineTo()、moveTo()、quadraticCurveTo()、rect(); 关闭路径,调用CanvasRenderingContext2D对象的closePath()方法; 填充路径或绘制路径,调用CanvasRenderingContext2D对象的fill()方法或stroke()方法。
2.图形绘制 CanvasRenderingContext2D绘制线条方法介绍如下: 2.2线条 CanvasRenderingContext2D绘制线条方法介绍如下: moveTo (float x, float y):把Canvas的当前路径结束点移动到x、y对应的点; lineTo (float x, float y):把Canvas的当前路径从当前结束点连接到x、y的对应点。
2.图形绘制 多边形 CanvasRenderingContext2D只提供了绘制矩形的方法,要使用路径才能绘制复杂的几何图形。 2.3多边形 多边形 CanvasRenderingContext2D只提供了绘制矩形的方法,要使用路径才能绘制复杂的几何图形。 正多边形中心点为(dx,dy),外圆半径为size,边数为n,相邻两定点与中心点形成的角的弧度为2 * Math.PI / n。
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的圆弧。
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是否为逆时针方向。
2.图形绘制 2.6曲线 曲线 CanvasRrenderingContext2D提供了bezierCurveTo()和quadraticCurveTo()两个方法,可以向Canvas的当前路径上添加复杂的曲线。 两种方法的区别与联系如下: bezierCurveTo()和quadraticCurveTo()都是贝塞尔曲线,bezierCurveTo()是一种三次贝塞尔曲线,quadraticCurveTo()是一种二次贝塞尔曲线。
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当前路径添加一段二次曲线。
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])):用于绘制字符串边框。
现场演示: 案例18-08:绘制文字 案例18-09:文字textAlign属性 案例18-10:文字textBaseAlign属性
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):从画布中已经画好的图像上复制全部或局部到画布的另一位置。
2.图形绘制 图像平铺 图像平铺就是用图像将画布填满,是绘制图像的一个重要功能。 实现平铺技术有两种方法: 2.8图像 图像平铺 图像平铺就是用图像将画布填满,是绘制图像的一个重要功能。 实现平铺技术有两种方法: 一种是使用前面所介绍的drawImage()方法。 另一种实现平铺效果方法是CanvasRenderingContext2D的createPattern方法。
现场演示: 案例18-12:drawImage平铺 案例18-13:createPatternTile平铺
2.图形绘制 图像裁剪 使用Canvas绘制图像时,经常只需要保留图像的一部分,使用Canvas API自带的图像裁剪功能可以实现这一功能。 2.8图像 图像裁剪 使用Canvas绘制图像时,经常只需要保留图像的一部分,使用Canvas API自带的图像裁剪功能可以实现这一功能。 使用CanvasRenderingContext2D的clip方法实现Canvas元素的图像裁剪功能,具体步骤如下: 将需要从图像上裁剪的区域定义成Canvas上的路径。 调用ConvasRenderingContext2D的clip()方法把路径裁剪下来。 绘制图像,只有被clip()方法裁剪的路径覆盖的部分才会被显示出来。
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分别表示重绘图像的起点横坐标、起点纵坐标。
2.图形绘制 2.8图像 位图输出 当程序CanvasRenderingContext2D通过CanvasRenderingContext2D在Canvas上绘图完成后,通常会需要将该图形或图像输出保存到文件中,可以调用Canvas提供的toDataURL()方法输出位图。 toDataURL方法的用法如下: toDataURL(string type):该方法把Canvas对应的位图编码成DataURL格式的字符串。其中参数type是一个形如image/png格式的MIME字符串。
3.图形变换与控制 3.1坐标变换 坐标变换 CanvasRenderingContext2D提供坐标变换支持,通过使用坐标变换,Web前端开发者无须繁琐地计算每个点的坐标,只需对坐标系统进行整体变换即可。 CanvasRenderingContext2D支持的坐标变换有平移、缩放和旋转三种操作,对应的方法分别为translate(),scale()和rotate(): translate(float dx, foat dy):用作平移坐标系统。 scale(float sx, float sy):缩放坐标系统。 rotate(float angle):旋转坐标系统。
3.图形变换与控制 CanvasRenderingContext2D提供两种方法来保存、恢复绘图状态: save():保存当前的绘图状态。 3.1坐标变换 CanvasRenderingContext2D提供两种方法来保存、恢复绘图状态: save():保存当前的绘图状态。 restore():恢复之前保存的绘图状态。
现场演示: 案例18-17:平移 案例18-18:缩放 案例18-19:旋转 案例18-20:坐标变换综合使用
3.图形变换与控制 3.2矩阵变换 矩阵变换 矩阵变换是CanvasRenderingContext2D提供的一个更通用的坐标变换方法transform()。 矩阵变换方法的具体使用方法如下: transform(m11, m12, m21, m22, dx, dy):这是一个基于矩阵的变换方法。其中前4个参数组成变换矩阵;dx, dy负责对坐标系统进行平移。
3.图形变换与控制 设置阴影 阴影是图形展示中不可或缺的效果,经常在Web和图形设计中使用。 3.3设置阴影 设置阴影 阴影是图形展示中不可或缺的效果,经常在Web和图形设计中使用。 在画布中创建阴影效果是相对较简单的,它可以通过4个全局属性进行控制,具体如下: shadowBlur:设置阴影的模糊度。 shadowColor:设置阴影的颜色。 shadowOffsetX:设置阴影X方向的偏移。 shadowOffsetY:设置阴影Y方向的偏移。
3.图形变换与控制 叠加风格 CanvasRebderingContext2D绘图时,后面绘制的图形会默认完全覆盖在前面绘制的图形。 3.4叠加风格 叠加风格 CanvasRebderingContext2D绘图时,后面绘制的图形会默认完全覆盖在前面绘制的图形。 特殊情况下需要其他叠加风格,可修改CanvasRebderingContext2D的globalCompositeOperation属性来实现。
3.图形变换与控制 3.4叠加风格 globalCompositeOperation各属性如表所示:
3.图形变换与控制 线性渐变 线性渐变方法的具体使用方法如下所示: 3.5填充风格 线性渐变 线性渐变方法的具体使用方法如下所示: createLinearGradient(float xStart, float yStart, float xEnd, float yEnd):四个参数分别表示渐变开始横坐标、渐变开始纵坐标、渐变结束横坐标、渐变结束纵坐标。
3.图形变换与控制 线性渐变 线性渐变使用步骤如下所示: 3.5填充风格 线性渐变 线性渐变使用步骤如下所示: 调用CanvasRenderingContext2D的createLinearGradient(float xStart, float yStart, float xEnd, float yEnd)方法创建一个线性渐变,该方法返回一个CanvasGradient对象。 调用CanvasGradient对象的addColorStop(float offset, string color)方法向线性渐变中添加颜色。 将CanvasGradient对象赋值给CanvasRenderingContext2D的fillStyle或strokeStyle属性。
3.图形变换与控制 圆形渐变 圆形渐变使用createRadialGradient()方法。 3.5填充风格 圆形渐变 圆形渐变使用createRadialGradient()方法。 createRadialGradient(float xstart, float ystart, float radiusStart, float xEnd, float yEnd, float radiusEnd): xStart、yStart控制渐变开始的圆圈圆心。 radiusStart控制开始圆圈的半径。 xEnd、yEnd控制渐变结束圆圈的圆心。 radiusEnd控制结束圆圈的半径。
3.图形变换与控制 位图填充 Canvas提供了CanvasPattern对象用于实现位图填充,位图填充方式有填充背景和填充边框2种: 3.5填充风格 位图填充 Canvas提供了CanvasPattern对象用于实现位图填充,位图填充方式有填充背景和填充边框2种: 填充背景已经在前面使用createPattern()方法实现图像平铺中应用; CanvasPattern对象既可赋值给strokeStyle属性作为(作为几何形状的边框),也可以赋值给fillStyle树形(作为集合形状的填充)。
现场演示: 案例18-24:线性渐变 案例18-25:圆形渐变 案例18-26:位图填充
4.案例:用Canvas绘制统计报表 本例将综合使用文本、矩形、圆以及渐变、叠加等效果绘制“某网站用户访问来源分布饼状图”。 预期实现效果如下图所示:
现场演示: 案例18-27:某网站用户访问来源
Thanks.