《移动商务网页设计与制作教学课件作者魏利华第8章用html5绘制图形》由会员分享，可在线阅读，更多相关《移动商务网页设计与制作教学课件作者魏利华第8章用html5绘制图形（53页珍藏版）》请在金锄头文库上搜索。
1、第8 章 用 HTML5 绘制图形,8. 1 canvas 基础知识 8. 2 画布中的路径设置 8. 3 运用样式与颜色 8. 4 绘制渐变图形 8. 5 绘制变形图形 8. 6 给图形绘制阴影 8. 7 组合多个图形 8. 8 小结,返回,8. 1 canvas 基础知识,. 是什么 元素是中新增的一个重要元素，专门用来绘制图形。在页面上放置一个元素就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。 在元素里进行绘画，并不是指拿鼠标来作画。在网页上使用元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为像素，高为像素，用户可以自定义具体的大小或者设置元素的其他特性。在页面中加入了
2、元素后，便可以通过来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。 其语法格式为： ,下一页,返回,8. 1 canvas 基础知识,. 在页面中放置元素 在中放入元素非常简单和直观，代码如下： 以上代码会在页面上显示一块像素像素的“隐藏”区块。要为其增加一个边框才可以看见它，代码如下 程序的运行结果，如图.所示。,上一页,下一页,返回,8. 1 canvas 基础知识,其中增加的“ ”属性是为了在开发过程中通过该迅速找到该元素并在其上画图。 . 绘制带边框的矩形 下面在画布中绘制一个矩形。本例调用了脚本文件中的函数进行图形描绘。该函数放置在的属性中
3、，使用 “（）；”语句可调用脚本文件中的函数进行图像描画。 在本例中函数的功能是把画布的背景用浅蓝色涂满，然后画出一个绿色正方形，正方形的边框为红色，如图.所示。,上一页,下一页,返回,8. 1 canvas 基础知识,用元素绘制矩形的具体步骤如下： （）用.（）方法获得元素，代码如下： （）使用对象的（） 方法获得上下文，同时传入使用的类型，这里传入的仍然是“”，代码如下：,上一页,下一页,返回,8. 1 canvas 基础知识,（）填充与绘制边框。用元素绘制图形，有两种方式填充（）与绘制边框（）。填充是指填满图形内部；绘制边框是指不填满图形内部，只绘制图形的边框。要结合这两种方式绘制图形。
4、 （）设定绘图式样（）。在进行图形绘制的时候，首先要设定好绘图的式样及如何调用有关方法。所谓绘图式样主要指图形的颜色以及颜色以外的样式。 （）指定线宽。图像上下文的属性设置图形边框的宽度，代码如下：,上一页,下一页,返回,8. 1 canvas 基础知识,（）指定颜色值。用颜色名或者十六进制的颜色值定义颜色，例如“”“”“”。也可以用或函数来指定颜色值。 （）矩形的绘制。用方法绘制矩形，用方法绘制矩形边框，代码如下： 程序运行界面，如图.所示。,上一页,返回,. 画布中的路径设置,. 使用方法绘制圆形 要想绘制其他图形，需要使用路径。同绘制矩形一样，绘制开始时还是要取得图形上下文，然后需要执行
5、如下步骤： 开始创建路径； 创建图像的路径； 关闭路径； 进行图形绘制。 简单来说，绘制圆形的步骤是先使用路径勾勒图形轮廓，然后设置颜色，进行绘制。 （）开始创建路径。,下一页,返回,. 画布中的路径设置,（）创建图像的路径。 使用图形上下文对象的方法。该方法的定义如下： （）关闭路径。 路径创建完成后，使用图形上下文对象的方法将路径关闭。该方法的定义如下： （）进行图形绘制。 进行圆形绘制，并设定绘制样式。实现的代码如下：,上一页,下一页,返回,. 画布中的路径设置,绘制完成的图形在浏览器中的显示效果如图.所示。 . 使用和路径绘制火柴人 接下来介绍除了方法以外，如何使用其他绘制图形的方法来
6、绘制简单图形。 （，） 方法：不绘制，只是将当前位置移动到新的目标坐标（，）。 （，）方法：不仅将当前位置移动到新的目标坐标（，），而且在两个坐标之间画一条直线。,上一页,下一页,返回,. 画布中的路径设置,简而言之，上面两个函数的区别在于：就像是提起画笔，移动到新位置，而告诉用画笔从纸上的旧坐标画条直线到新坐标。需要提醒大家注意的是，不管调用它们哪一个，都不会真正画出图形，因为还没有调用或者函数。目前只是在定义路径的位置，以便后面绘制时使用。 再来看一个特殊的路径函数。这个函数的行为和很像，它们唯一的差别在于会将路径的起始坐标自动作为目标坐标。还会通知当前绘制的图形已经闭合或者形成了完全封闭
7、的区域，这对将来的填充和描边都非常有用。,上一页,下一页,返回,. 画布中的路径设置,. 贝塞尔和二次方曲线 绘制贝塞尔曲线主要使用（）方法。该方法可以说是的曲线版，将当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。该方法的定义如图.所示： （，）； 该方法使用个参数。绘制贝塞尔曲线的时候，需要两个控制点，为第一个控制点的横坐标，为第一个控制点的纵坐标；为第二个控制点的横坐标，为第二个控制点的纵坐标；为贝塞尔曲线的终点横坐标，为贝塞尔曲线的终点纵坐标。,上一页,下一页,返回,. 画布中的路径设置,两种方法的区别如图.所示。 它们都有一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个
8、控制点，而三次方贝塞尔曲线有两个控制点。参数和是终点坐标，和是第一个控制点的坐标，和是第二个控制点的坐标。,上一页,返回,. 运用样式与颜色,. 和 的样式与颜色设置主要利用和这两个属性。这两个属性的定义方法如下： ； ； 是用于设置图形轮廓的颜色，而用于设置填充颜色。可以是表示颜色值的字符串、渐变对象或者图案对象。在默认情况下，线条和填充颜色都是黑色（颜色值）。这里需要注意的是对于自定义颜色则应该保证输入符合颜色值标准的有效字符串。下面的代码都是符合标准的颜色表示方式，都表示同一种颜色（橙色）。,下一页,返回,. 运用样式与颜色,.； .； .（，）； .（，）； 与的实例效果如图.所示。,
9、上一页,下一页,返回,. 运用样式与颜色,. 透明度 通过设置属性或者使用一个半透明颜色作为轮廓或填充的样式可绘制透明或半透明的图形。属性定义代码如下： 这个属性影响到里所有图形的透明度，其有效值的范围是.（完全透明）到.（完全不透明），默认值是.。属性在需要绘制大量拥有相同透明度的图形时候相当高效。,上一页,下一页,返回,. 运用样式与颜色,下面通过一个实例来了解一下属性的应用。本例用四色格作为背景，设置为.后，在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越多，原先所画的圆的透明度就越低。通过增加循环次数，画更多的圆，背景图的中心部分会完全消失（图.） . 线型 线
10、型包括如下属性： ； ； ； ,上一页,下一页,返回,. 运用样式与颜色,.属性 该属性设置当前绘线的粗细，属性值必须为正数。默认值是.。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。的显示效果如图.所示。 .属性 该属性决定了线段端点显示的样子。它可以为下面的三种值之一：、和，默认值是。 的显示效果如图.所示。,上一页,下一页,返回,. 运用样式与颜色,.属性 该属性值决定了图形中两线段连接处所显示的样子。它可以是以下三种值之一：、和。默认值是。 的显示效果如图.所示。,上一页,返
11、回,. 绘制渐变图形,. 线性渐变 前面学习过，使用方法在填充时指定填充颜色，其实，除了指定颜色外，还可以用来指定填充对象。渐变是指在填充时到另外一种颜色。渐变分为几种，如线性渐变、径向渐变等。 绘制线性渐变时，需要使用到对象。使用图像上下文对象的方法创建该对象。该方法的定义如下：从一种颜色慢慢过渡,下一页,返回,. 绘制渐变图形,该方法使用个参数，为渐变起始地点的横坐标，为渐变起始地点的纵坐标，为渐变结束地点的横坐标，为渐变结束地点的纵坐标。 创建了一个使用两个坐标点的对象之后，使用方法进行绘制颜色，该方法的定义如下： 该方法使用两个参数和。为所设定的颜色离开渐变起始点的偏移量。该参数的值是
12、一个范围在到之间的浮点值，渐变起始点的偏移量为，渐变结束点的偏移量为其运行效果如图.所示。,上一页,下一页,返回,. 绘制渐变图形,. 径向渐变 径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。譬如在绘制太阳时，沿着太阳的半径方向向外扩散出去的光晕就是一种径向渐变。 使用图形上下文对象的方法绘制径向渐变，该方法的定义如下： .（， ， ， ， ， -）,上一页,下一页,返回,. 绘制渐变图形,该方法使用个参数，为渐变开始圆的圆心横坐标，为渐变开始圆的圆心纵坐标，为开始圆的半径，为渐变结束圆的圆心横坐标，为渐变结束圆的纵坐标，为结束圆的半径。 在这个方法中，分别指定了两个圆的大小与位置。从第一个圆的圆心处向外进行扩散渐变，一直扩散到
