移动商务网页设计与制作教学课件作者魏利华第8章用html5绘制图形.ppt

下载文档

4
0
约7.54千字
约 53页
2019-10-14 发布于未知
举报
版权申诉
保障服务

移动商务网页设计与制作教学课件作者魏利华第8章用html5绘制图形.ppt

1、本文档共53页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

８.７　组合多个图形上一页下一页返回８.７　组合多个图形上一页下一页返回８.７　组合多个图形上一页下一页返回８.７　组合多个图形ｊｓ函数负责响应下拉列表的ｏｎｃｈａｎｇｅ事件，从而在ｃａｎｖａｓ上画图，它先绘制原图形（ｄｅｓｔｉｎａｔｉｏｎ，在这里是一个蓝色正方形），然后取得用户选择的组合方式，再根据此方式画出新图形（ｓｏｕｒｃｅ，在这里是一个红色的圆）：可以根据当前用户的选择来显示不同结果：这里的ｓｏｕｒｃｅ是红色的圆（新图形），ｄｅｓｔｉｎａｔｉｏｎ是蓝色正方形（旧图形），如图８.２１所示。上一页返回８.８　小结本章主要介绍ＨＴＭＬ５中的画布———ｃａｎｖａｓＡＰＩ，这是一个在网页上画图的编程接口。本章介绍如何使用ｃａｎｖａｓＡＰＩ绘制各种图形，并在讲解实例的同时对绘制中应用到的各种属性进行了详细的阐述。在讲解完绘制图形以后，本章继续讲解了如何在画布中使用图像。希望读者能了解并熟练掌握ＨＴＭＬ５新增的ｃａｎｖａｓ元素，以此制作出更加丰富多彩、赏心悦目的Ｗｅｂ页面。返回图８.１　ｃａｎｖａｓ在页面上的显示效果返回图８.３在ｃａｎｖａｓ画布上画矩形返回图８.４　在ｃａｎｖａｓ画布上画带边框的矩形返回图８.５在ｃａｎｖａｓ画布上画圆形返回图８.６　使用路径绘制的火柴人返回图８.７　bezierCurve与quadraticCurtive的区别返回图８.１０　ｆｉｌｌＳｔｙｌｅ与ｓｔｒｏｋｅＳｔｙｌｅ实例返回图８.１１　ｇｌｏｂａｌＡｌｐｈａ属性实例返回图８.１２　ｌｉｎｅＷｉｄｔｈ属性实例返回图８.１３　ｌｉｎｅＣａｐ属性实例返回图８.１４ｌｉｎｅＪｏｉｎ属性实例返回图８.１５　绘制线性渐变返回图８.１６　径向渐变返回图８.１７　坐标变换实例返回图８.１８　用ｔｒａｎｓｆｏｒｍ实现坐标平移返回图８.２０　给图形绘制阴影返回图８.２１　ｃａｎｖａｓ的图形组合１７０返回 * 第8 章用 HTML5 绘制图形 8. 1 canvas 基础知识 8. 2 画布中的路径设置 8. 3 运用样式与颜色 8. 4 绘制渐变图形 8. 5 绘制变形图形 8. 6 给图形绘制阴影 8. 7 组合多个图形 8. 8 小结返回 8. 1 canvas 基础知识８.１.１　ｃａｎｖａｓ是什么ｃａｎｖａｓ元素是ＨＴＭＬ５中新增的一个重要元素，专门用来绘制图形。在页面上放置一个ｃａｎｖａｓ元素就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。在ｃａｎｖａｓ元素里进行绘画，并不是指拿鼠标来作画。在网页上使用ｃａｎｖａｓ元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为３００像素，高为１５０像素，用户可以自定义具体的大小或者设置ｃａｎｖａｓ元素的其他特性。在页面中加入了ｃａｎｖａｓ元素后，便可以通过ＪａｖａＳｃｒｉｐｔ来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。其语法格式为：＜ｃａｎｖａｓ＞＜／ｃａｎｖａｓ＞下一页返回 8. 1 canvas 基础知识８.１.２　在页面中放置ｃａｎｖａｓ元素在ＨＴＭＬ中放入ｃａｎｖａｓ元素非常简单和直观，代码如下：以上代码会在页面上显示一块４００像素×３００像素的“隐藏”区块。要为其增加一个边框才可以看见它，代码如下程序的运行结果，如图８.１所示。上一页下一页返回 8. 1 canvas 基础知识其中增加的“ｉｄ＝ ‘ｘｙｆｇ’”属性是为了在开发过程中通过该ｉｄ迅速找到该ｃａｎｖａｓ元素并在其上画图。８.１.３　绘制带边框的矩形下面在ｃａｎｖａｓ画布中绘制一个矩形。本例调用了脚本文件中的ｄｒａｗ函数进行图形描绘。该函数放置在ｂｏｄｙ的属性中，使用ｏｎｌｏａｄ＝ “ｄｒａｗ（‘ｃａｎｖａｓ’）；”语句可调用脚本文件中的ｄｒａｗ函数进行图像描画。在本例中ｄｒａｗ函数的功能是把ｃａｎｖａｓ画布的背景用浅蓝色涂满，然后画出一个绿色正方形，正方形的边框为红色，如图８.３所示。上一页下一页返回 8. 1 canvas 基础知识用ｃａｎｖａｓ元素绘制矩形的具体步骤如下：（１）用ｄｏｃｕｍｅｎｔ.ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（）方法获得ｃａｎｖａｓ元素，代码如下：（２）使用ｃａｎｖａｓ对象的ｇｅｔＣｏｎｔｅｘｔ（）方法获得上下文，同时传入使用的ｃａｎｖａｓ类型，这里传入的仍然是“２ｄ”，代码如下：上一页下一页返回 8. 1 canvas 基础知识（３）填充与绘制边框。用ｃａｎｖａｓ元素绘制图形，有两种方式———填充（ｆｉｌｌ）与绘制边框（ｓｔｒｏｋｅ）。填充是指填满图形内部