网页制作与实训幻灯片教案.ppt

《网页制作与实训幻灯片教案.ppt》由会员分享，可在线阅读，更多相关《网页制作与实训幻灯片教案.ppt（181页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目一项目一HTML基础基础本课教学内容本课教学内容w 静态网页制作静态网页制作w HTMLHTML的常见标签（文字布局的常见标签（文字布局、文字设计标签）文字设计标签）w 表格标签表格标签w 链接链接w 图片标签图片标签w 表单标签（文本框表单标签（文本框、密码框、下拉列表）、密码框、下拉列表）w 框架框架 网页实景图网页实景图 给给HTMLHTML语言打的广告语言打的广告w 一种进行网页设计的语言一种进行网页设计的语言w 一种标签式的程序设计语言一种标签式的程序设计语言w 一种纯文本式的语言一种纯文本式的语言w 一种简单易学的语言一种简单易学的语言w 一种可以使用文本编辑器进行编辑的语言一

2、种可以使用文本编辑器进行编辑的语言w 编辑的文件名后缀是编辑的文件名后缀是”.html”.html”。 HTML HTML特点特点 1.HTMLHTML有两种类型的标签，有两种类型的标签，w 一类是单标签一类是单标签，就是一种单标签，它就是一种单标签，它只需要单独一组符号就可以表示完整的功只需要单独一组符号就可以表示完整的功能。能。w 另一种是双标签另一种是双标签，形如，形如内容内容，成，成对出现对出现。w 一般良好的习惯是全部用双标签。一般良好的习惯是全部用双标签。 HTML HTML特点特点 2.HTMLHTML语言对于大小写不敏感语言对于大小写不敏感，比如马，比如马上将要学习的表示上将要

3、学习的表示HTMLHTML文档的标签：文档的标签：，也可写做，也可写做，甚至可以写为，甚至可以写为，但是一般推荐，自始，但是一般推荐，自始至终使用同一种书写方式。至终使用同一种书写方式。 HTMLHTML文件基本结构文件基本结构w 标题标题 （浏览器标题）（浏览器标题） 内容主体（网页具体内容）内容主体（网页具体内容） （头部信息：（头部信息：用于设置网页相用于设置网页相关属性，比如网关属性，比如网页标题、缓存等，页标题、缓存等，可以省略）可以省略） HTMLHTML文件基本结构（续）文件基本结构（续） 学会学会 Hello WorldHello World： 一个最简单的一个最简单的HTML

4、HTML代码代码 Hello world （标题可以为空） Hello World! 1 1.2 .2 标题标签标题标签HTMLHTML简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 一般形式为一般形式为内容内容，即，即到到，为最大，为最大，为最小为最小 运行结果运行结果 1.2 1.2 换行标签换行标签欢迎学习欢迎学习 HTML这会是一种很有趣的这会是一种很有趣的体验体验另一个段落元素另一个段落元素 运行结果运行结果 1.3 1.3 段落标签段落标签欢迎使用欢迎使

5、用 HTML这会是一种很有趣的体验这会是一种很有趣的体验 另一个段落元素另一个段落元素 运行结果运行结果 1.3 1.3 段落标签段落标签w为段落标签，我是一段文字walignalign属性，段落的对齐方式，较为常用的有leftleft、centercenter、rightright：w例： 我是居左的文字 1.3 1.3 段落标签（续）段落标签（续）学习学习HTML这会是一种很有趣的体验这会是一种很有趣的体验 运行结果运行结果右对齐右对齐Left：左对齐左对齐Center：居中居中Right：右对齐右对齐 1.4 1.4 文字设计标签文字设计标签w 标签:faceface：用来设置字体类型，

6、默认为宋体。：用来设置字体类型，默认为宋体。colorcolor：用于设置字体颜色：用于设置字体颜色size:size:用于设置字体大小用于设置字体大小例如： 网页设计教程 例如： 网页设计实验指导书 十六进制的RGB颜色码是用六位十六进制数字表示的红、绿、蓝三原色的组合颜色。1.4 1.4 文字设计标签（续）文字设计标签（续）常见的设置常见的设置文字风格文字风格的标签有：的标签有：内容：将内容设置为粗体。 内容：将内容设置下划线。 内容：将内容设置为斜体。 内容：将内容设置为上标。 内容：将内容设置为下标。例：我是粗体 我是斜体1.5 1.5 超链接标签超链接标签（1） href属性用来指定

7、链接的目标地址，可使用URL。 在标记之间可指定作为超链接的文本或图像。 例如： 百度 点我有惊喜！ w target属性，指明链接网页显示的目标窗口，可取_self、_blank、_parent或_top四个值中的任何一个，_self为默认值。例如： 新浪网 w 将_blank换成_self、_parent或_top，试试！看看有什么不同。1.5 1.5 超链接标签超链接标签 ：定义：定义表格表格，表格的所有内容都写，表格的所有内容都写在这个标签之内在这个标签之内 ：定义标题，标题会自动出现在整张表格的上方：定义行 ：定义表头，包含在之间，表头中的文字会自动变成粗体 ：定义单元格(表格的具体

8、数据)，包含在之间1.6 1.6 表格标签表格标签1.6 1.6 表格标签表格标签w 表格属性： alignalign： leftleft，rightright，centercenter，表示，表示表格在页面的布表格在页面的布局方式局方式，、的该属性表示该行和该单元格的布的该属性表示该行和该单元格的布局方式。局方式。默认布局方式为左对齐默认布局方式为左对齐 bgcolorbgcolor：设置背景颜色：设置背景颜色 borderborder：设置：设置边框的宽度边框的宽度，属性值为整数，为，属性值为整数，为 0 0 时表时表格没有边框，默认值为格没有边框，默认值为 0 0 widthwidth：

9、宽度宽度，默认单位为，默认单位为像素像素，也可以使用，也可以使用百分制百分制单单位位 heightheight：高度高度，默认单位为，默认单位为像素像素；也可以使用百分制单；也可以使用百分制单位位1.6 1.6 表格标签表格标签w 对于整张表格，标签常用的属性有以下几个： bordercolorbordercolor：表格：表格边框边框的颜色，默认为黑色的颜色，默认为黑色 cellpaddingcellpadding：单元格：单元格内容与单元格内容与单元格边界的距离边界的距离 cellspacingcellspacing：单元格的：单元格的边框与表格边框与表格边框之间的边框之间的宽度宽度1.6

10、 1.6 表格标签表格标签课后作业：课后作业：wP20 w三、操作题w（表格内容可以换成自己喜欢的）w * *合并单元格合并单元格w 合并单元格必须对标签标签中的 rowspanrowspan、colspan colspan 进行设置，默认为 1（表示没有合并）w 我占两行，表示该单元格该单元格及其下面的单元格合并成一个及其下面的单元格合并成一个 动手做一做动手做一做例 表格标记示例 （颜色设置可以不做，宽度适当即可） 答案：答案：表格标记示例 球队 基本资料 所属国家 国际排名 皇家马德里 西班牙 1 切尔西英格兰2 AC米兰意大利3 拜仁慕尼黑德国4 1.7 1.7 图片标签图片标签w 图

11、像标记： w 网页与图片a.jpg在同一目录同一目录下：w 在网页文档所在目录的子目录子目录(images)下： w 在网页文档所在目录的上层目录上层目录下： 常用属性：alt：当浏览器不能显示指定图像时，显示alt指定的替代文字。align：对齐方式。border：设定图像的边框，如果值为0就表示不显示边框。width：设定图像宽度，单位为像素或百分比。height：设定高度高度，单位为像素或百分比。 1.7 1.7 图片标签图片标签动手做一做：动手做一做：w在网页中插入一张图片，居中，边框为1，高度50%，宽度80%。w正下方写上自己姓名，颜色，大小自定义，楷体。客户端用户利用表单元素输入

12、信息，表单将这些信息发送到服务器端作进一步的处理。（1）表单标记：常用属性包括action、method和target：action：指定服务器端处理信息的动态网页的存：指定服务器端处理信息的动态网页的存储位置和名称。储位置和名称。method：指定客户端信息发送到服务器端的方：指定客户端信息发送到服务器端的方式，分为式，分为post和和get两种。两种。target：指定服务器端返回结果显示的目标窗口：指定服务器端返回结果显示的目标窗口。 1.8 1.8 表单标签表单标签 1.8 1.8 表单标签表单标签type 可以为以下的值： texttext：文本框，：文本框，text text 也为

13、也为 type type 的默认属的默认属性性passwordpassword：密码框：密码框 radioradio：单选按钮，可以将多个单选按钮的：单选按钮，可以将多个单选按钮的 name name 属性设置相同，使其成为一组。属性设置相同，使其成为一组。checkedchecked属性可设置默认被选属性可设置默认被选 checkboxcheckbox：复选框，：复选框，checked checked 属性可设置属性可设置默认被选默认被选（2）表单元素标记 (显示文字显示文字) （显示文字）（显示文字）（多行文本框/文本域） 1.8 1.8 表单标签表单标签 1.8 1.8 表单标签表单标签

14、 1.9 1.9 框架框架w框架的写法如下： 纵向纵向3:73:7分割分割 框架窗口框架窗口 注意：注意：w 框架是定义多个网页的集合，因此比单个网页的作用域大。不要写在里！w 例：w w wwww w 综合练习综合练习w使用DW编写，完成如下网页：w例子项目一 综合练习.docx项目一项目一 结束结束w完成项目一 综合练习：w项目一 综合练习.docxHTML5 +CSS3HTML5 +CSS3网页制作网页制作HTML5 HTML5 构建网站构建网站为什么要学为什么要学HTML5HTML5？HTML5HTML5发展前景如何？发展前景如何？w 理由一：移动开发理由一：移动开发 w移动设备IOS

15、系统、Android系统对HTML5的支持。w当手机浏览器完全支持HTML5那么开发移动项目将会和设计更小的触摸显示一样简单。现代流行浏览器都支持HTML5（Chrome（谷歌），Firefox（火狐），IE9，Opera（欧朋），Safari（苹果）w 理由二：跨浏览器支持理由二：跨浏览器支持2015年1月28日，世界上最大的视频网站YouTuBe正式宣布HTML5取代flash。wAdobe宣布放弃移动flash开发，你将会考虑使用HTML5来开发web应用。w 理由三：内置多媒体标签理由三：内置多媒体标签w没错，你可以使用HTML5的开发游戏。HTML5提供了一个非常伟大的，移动友好的方

16、式去开发有趣互动的游戏。如果你开发Flash游戏，你就会喜欢上HTML5的游戏开发。w 理由四：游戏开发理由四：游戏开发w腾讯腾讯-微信在微信在HTML5HTML5上的布局上的布局w腾讯，作为掌控着国内最大的移动入口平台公司，正在通过微信公众平台开始构建一个强大的轻应用平台。w开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。这要归功于HTML5强大的交互性。w 理由五：广阔的发展前景理由五：广阔的发展前景w百度百度轻应用：轻应用：w百度的轻应用本质就是html5。w2014年，百度通过收购了91手机助手、安卓市场

17、以及自家推出的百度手机卫士、百度搜索等，百度在移动应用分发上已经确立了老大的位置。w从百度的战略发展来看，百度更重视html5平台的搭建。而且百度在很早之前就已经推出了“轻应用”这个概念，百度的这个轻应用本质就是html5，并向开发者和企业推出了各种技术开放接口。十个发展方向十个发展方向：w 手机页游的3D化手机网游HTML5移动营销动漫、二次元轻应用、Webapp、微站移动视频、在线直播引领视频升级资源复用，HTML5重新洗牌IP（访问量）市场影游互动，HTML5推动泛娱乐产业发展WebVR让VR从贵族走向大众化微信或推出HTML5应用市场国外知名调研机构VisionMobile2016年Q

18、1调研报告显示，Java、Object C，Swift（苹果开发）都呈现下滑趋势 ，只有HTML5持续上涨，目前HTML5已经取代原生APP开发，成为第一大移动开发技术。 理由六：好就业，好赚钱理由六：好就业，好赚钱想想想想. . .假如某一天假如某一天. . . 小鲜肉玩的网游都是你开发的 . . “极限挑战”的播放器是你开发的 . . 苹果手机的某个应用是你开发的 . . 微信中的某个应用是你开发的. .HTML5 +CSS3HTML5 +CSS3网页制作网页制作HTML5 构建网站构建网站一、一、HTML5 HTML5 新增新增结构元素结构元素一、一、HTML5 HTML5 新增结构元素

19、新增结构元素例子：例子： 想想如果这样的区块有很多，需要很多个想想如果这样的区块有很多，需要很多个标签标签和和标签来定义，代码看起来真的很乱！标签来定义，代码看起来真的很乱！ 怎样让每一个专题内容与其他内容区分开来呢？怎样让每一个专题内容与其他内容区分开来呢？代码：看看是怎样解决的代码：看看是怎样解决的一、一、HTML5 HTML5 新增结构元素新增结构元素例子：例子：HTML |CSS |JavaScript |jQuery一、一、HTML5 HTML5 新增结构元素新增结构元素一、一、HTML5 HTML5 新增结构元素新增结构元素一、一、HTML5 HTML5 新增结构元素新增结构元素一

20、、一、HTML5 HTML5 新增结构元素新增结构元素一、一、HTML5 HTML5 新增结构元素新增结构元素二、二、HTML5HTML5文本语义元素文本语义元素二、二、HTML5HTML5文本语义元素文本语义元素二、二、HTML5HTML5文本语义元素文本语义元素二、二、HTML5HTML5文本语义元素文本语义元素二、二、HTML5HTML5文本语义元素文本语义元素二、二、HTML5HTML5文本语义元素文本语义元素HTML5HTML5的新增元素就学到这里的新增元素就学到这里吧！吧！试试做个炫酷的博客网站吧试试做个炫酷的博客网站吧 HTML5 +CSS3HTML5 +CSS3网页制作网页制作

21、HTML5 HTML5 表单表单先搞清楚三个概念先搞清楚三个概念URLURL 格式：scheme：/host：port/path， 例 ：http：/ scheme：指出WWW客户程序用来操作的工具。 “http：/”表示WWW服务器 “ftp：/”表示FTP服务器host：服务器地址，指出WWW页所在的服务器域名。port：端口有时（并非总是这样）path：路径（指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。先搞清楚三个概念先搞清楚三个概念绝对路径绝对路径 绝对路径是指文件在硬盘上真正存在的路径。 例如“bg.jpg”这个图片是存放在硬盘

22、的“E:book网页布局代码第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:book网页布代码第2章bg.jpg。 使用绝对路径指定网页的背景图片： 先搞清楚三个概念先搞清楚三个概念绝对路径绝对路径 使用绝对路径的缺点： 事实上，在网页编程时，很少会使用绝对路径。 如果使用“E:book网页布代码第2章bg.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。 因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘， 有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也不一

23、定会存在“E:book网页布局代码第2章”这个目录，因此在浏 览网页时是不会显示图片的。先搞清楚三个概念先搞清楚三个概念相对路相对路径径 为了避免这种情况，通常在网页里指定文件时，都会选择使用相对路径。 所谓相对路径，就是相对于自己，目标文件所在的位置。 例如上面的例子，“s1.html” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.html”来说，是在同一个目录的，那么要在“s1.html”文件里使用以下代 码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。 先搞清楚三个概念先搞

24、清楚三个概念相对路相对路径径 再举个例子，假设“s1.html”文件所在目录为“E:book网页布局代码第2章”，而“bg.jpg”图片所在目录为“E:book网页 布局代码第2章img”，那么“bg.jpg”图片相对于“s1.html”文件来说，是在其所在目录的“img”子目录里，则引用图片的语句应该为： 注意：注意：相对路径使用“/”，而绝对路径可以使用“”或“/”字符作为目录的分隔字符。由于“img”是“第2章”的子目录，因此在“img”前不用再加上“/”。先搞清楚三个概念先搞清楚三个概念相对路相对路径径在相对路径里常使用“./”来表示上一级目录。如果有多个上一级目录，可以使用多个“./

25、”，假设 “s1.htm”文件所在目录为“E:book网页布局代码第2章”，而“bg.jpg”图片所在目录为“E:book网页布局代码”，那 么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的上级目录里，则引用图片的语句应该为： 再搞清楚一个过程再搞清楚一个过程表单数据处理过程表单数据处理过程HTML5HTML5表单表单先来回顾下表单创建： 。表单元素。HTML5HTML5表单表单 action属性: 说明了提交时浏览器应该把从用户收集的数据发送到什么地方. method: 规定如何发送表单数据，包括GET和POST两种方法： GET方法：将表单数据以名称/值对的形式附加到

26、 URL 中（通过URL地址可以看到提交的数据，不安全！） POST方法：将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中），没有长度限制。安全！HTML5HTML5表单表单HTML5 HTML5 表单元素表单元素inputinput还记得还记得定义不同类型的输入框吗？定义不同类型的输入框吗？input type=”text: 默认20 个字符。定义单行输入字段，用户可在其中输入文本。password: 定义密码字段。字段中的字符会被遮蔽。search: 定义用于搜索的文本字段。number和range: 只限数字输入，生成具有输入范围和步长的文本框。date系列（d

27、ate/month/time）: 定义日期字段（带有 calendar 控件）。color: 定义颜色选择器。checkbox/radio: 定义复选框、单选框。email/tel/url: 定义电子邮件格式、电话格式、网址格式。file: 定义文件选择器。模拟在移动端创建表单：模拟在移动端创建表单：谷歌浏览器预览，打开“开发者工具”，点击“手机切换按钮” ，选择设备。在和之间设置缩放参数：input type=”其他其他重要属性重要属性texttext类型定义用户可输入文本的单行输入框类型定义用户可输入文本的单行输入框: :value：文本框初始值（黑色，必须人工删除）。placeholde

28、r: 输入提示（灰色，光标移动到文本框即消失）maxlength：设置文本框最大字符长度。required：必填项，否则无法通过验证。readonly:文本框为只读状态，disable-禁用状态（on/off）。list：指定为文本框提供建议值的数据列表（的id）。size:文本框宽度。（注意与maxlength的区别）autofocus: 打开页面时元素自动获得焦点。autocomplete：适用于form和input自动完成（需要浏览器开启该功能）。input type=”注意：默认form的该属性是ON，里面的元素默认也是on，改成off看看？input type=”定义只限输入数字的文

29、本框，可以设定输入范围和步长。定义只限输入数字的文本框，可以设定输入范围和步长。required：必填项，否则无法通过验证。readonly:文本框为只读状态，disable-禁用状态（on/off）。list：指定为文本框提供建议值的数据列表（的id）。value：文本框初始值（黑色，必须人工删除）。min: 可输入的最小值max: 可输入的最大值 请看实例（注意设置缩放参数！）step: 制定上下调节的步长 input type=”系列系列type的值：的值：date - 选取日、月、年month - 选取月、年week - 选取周和年time - 选取时间（小时和分钟）datetime

30、- 选取时间、日、月、年（UTC 时间）datetime-local - 选取时间、日、月、年（本地时间） 查看实例 input type=”定义颜色选择器定义颜色选择器 。 来吧，试一试来吧，试一试 ！ E-mail: * *input ”定义单选、复选框定义单选、复选框 。 checked属性：设置是否选中的状态。 value属性：设置选中时提交的数据。 注意单选框name属性的设置。 查看实例 input ”定义输入邮件格式、电话格式、定义输入邮件格式、电话格式、url格式的文本框格式的文本框点击提交按钮自动验证格式是否正确，并提示输入信息点击提交按钮自动验证格式是否正确，并提示输入信息

31、 查看实例 input type=”定义文件选择器：定义文件选择器：属性：属性： accept=”image/gif,image/jpeg,image/png”只能输入格只能输入格式为式为gif,jpeg,png的图片。的图片。 查看实例 input type=”定义提交、重置按钮，提交到定义提交、重置按钮，提交到action所指定的程序处理。所指定的程序处理。 我是按钮定义一个按钮：在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。如果在 HTML5 表单中使用 button 元素，会自动提交表单内容。若是写在表单外面则不

32、会提交！请在 HTML 表单中使用 input 元素来创建按钮。 项目三综合练习项目三综合练习填写信息练习说明：练习说明： 在移动设备预览，请在间添加： 为了显示整齐，请在表单中创建表格，将项目名称和表单元素分别放在表格中。（8行两列，第一行合并，第8行合并） 表单提交到success.html中： 点击提交按钮后success.html在一个空白网页中打开：练习说明：练习说明： 账号、密码、邮箱为必填项：设置的required属性 为生日、省份、邮箱设置输入提示信息：设置的placeholder=请选择XXXHTML5 +CSS3HTML5 +CSS3网页制作网页制作HTML5 HTML5

33、多媒体设计多媒体设计网页多媒体演变：网页多媒体演变：HTML5以前：必须安装flash插件才可以播放多媒体音、视频，但是. .累累存在明显安全问题险险系统资源消耗大（死机、耗电）卡卡HTML5之后：一个、一个就搞定了！网页多媒体演变：网页多媒体演变：音视频深度解析音视频深度解析容器、编容器、编/ /解码器解码器浏览器支持情况浏览器支持情况Internet Explorer 8 不支持 。在 IE 9 中，将对 audio 元素的支持。音频格式：视频格式：插入音频插入音频 你的浏览器不支持！（当浏览器不支持时才显示）音频如何兼容多种浏览器？音频如何兼容多种浏览器？audio 元素允许多个 sou

34、rce 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式 你的浏览器不支持！（浏览器不支持才显示） 插入视频插入视频 你的浏览器不支持！（当浏览器不支持时才显示）视频如何兼容多种浏览器？视频如何兼容多种浏览器？avideo 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式： 你的浏览器不支持！（浏览器不支持才显示） 综合实训综合实训我的娱乐空间我的娱乐空间实训指导：w为网页添加背景图片：bg.jpgw利用HTML5结构元素对网页结构进行布局（包括一个大标题、三个：音频区域、视频区域、下载区域）w音频视频不支

35、持显示提示信息：您的浏览器不支持该音频格式！w音频视频要求兼容多种格式：音频：.ogg和.mp3; 视频：.ogv 和 .mp4综合实训综合实训我的娱乐空间我的娱乐空间大标题大标题音频区域：音频区域：.视频区域：视频区域：.下载区域：下载区域：.HTML5 +CSS3网页制作网页制作项目五项目五 使用使用canvas元素绘元素绘图图任务一任务一 canvas基础基础什么是什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。任务一任务一

36、canvas基础基础先来看一个小例子如何在画布中创建一个矩形任务一任务一 canvas基础基础1.创建创建Canvas：在和里创建，并设置画布的 id、宽度和高度：画布默认没有边框，所以看不到效果，给它加个边框试试。任务一任务一 canvas基础基础2. 利用利用CSS样式给画布样式给画布Canvas加边加边框框：canvas画布canvas border:solid 2px black; （实线边框，2像素，黑色）任务一任务一 canvas基础基础画布的坐标系：画布的坐标系： 画布左上角为坐标原点（0,0） 向右x增大，向下y增大（0,0）（300,200）任务一任务一 canvas基础基础

37、3. 利用利用JS脚本代码在脚本代码在Canvas中绘制中绘制一个实心的矩形一个实心的矩形：function drawSqure() var canvas=document.getElementById(myCanvas);var context=canvas.getContext(2d);context.fillStyle=rgb(14,120,209);context.fillRect(30,30,150,150); 任务一任务一 canvas基础基础认识认识JSJS函数函数：1. JS函数在哪里写？函数在哪里写？在这里写js函数! ! ! 2. JS函数怎么定义？函数怎么定义？(函数定义

38、语法函数定义语法)function 函数名（）.函数实现过程（每句话结束加分号！）.注意：function是定义函数的关键字，必须要有，函数名可以自定义，一般用有意义的英文单词。任务一任务一 canvas基础基础认识认识JSJS变量变量：在在JS中使用中使用var来定义任何变量，变量名尽量简单易懂：来定义任何变量，变量名尽量简单易懂： 语法：语法：var 变量名变量名= 变量值；（变量名对大小写敏感）变量值；（变量名对大小写敏感） var test；/定义一个类型未知的变量test；var test=2；/定义一个变量test，初始值为数值类型：2；var test=”javascript”;

39、 /定义一个变量test，初始值为字符串类型：javascript；（字符串必须加上英文双引号!）var canvas=document.getElementById(myCanvas);/ 定义一个变量canvas，赋值为getElementById方法的返回值。任务一任务一 canvas基础基础认识认识JSJS变量变量：在js中变量可以理解为一个代号，只是用于保存数据。变量分类： 1. 自定义变量：用var来定义，变量名自定（如前面所讲） 2. js内置对象，已存在可直接使用，如：document （对象是一种特殊的变量，其包含若干属性和方法可根据需要进行调用）变量采用“先定义，后使用”的

40、原则。变量怎么使用？1. 使用点号“.”调用其方法来实现一定的功能： document.getElementById(myCanvas); /方法有（）2. 使用点号“.”设置其属性的值： context.fillStyle=rgb(14,120,209)；/属性没（）任务一任务一 canvas基础基础JSJS变量赋值和方法调用变量赋值和方法调用： 来看两个例子：var canvas=document.getElementById(myCanvas);这句话这样理解：内置对象document调用其方法getElementById(),返回值赋给变量canvas。getElementById(m

41、yCanvas)的作用是根据元素的id获取该元素对象。括号里的内容为方法的参数，即根据传入的参数也就是id决定获取哪个元素的对象。var context=canvas.getContext(2d); /canvas变量调用getContext(2d)方法返回二维画笔，定义变量context用于保存画笔。context.fillStyle=rgb(14,120,209); /调用画笔context的属性fillStyle，并将其设置为蓝色。任务一任务一 canvas基础基础绘制实心矩形的绘制实心矩形的步骤：步骤：function drawSqure() /定义js函数，函数名为drawSqure

42、/步骤一：获取画布（拿纸拿纸）var canvas=document.getElementById(myCanvas);/步骤二：设置画布为二维环境（拿笔拿笔）var context=canvas.getContext(2d);/步骤三：设置填充绘画的颜色（设置笔的颜色设置笔的颜色）context.fillStyle=rgb(14,120,209);/步骤四：绘制“被填充”的矩形（开始画开始画）context.fillRect(30,30,150,150); /起始坐标：X,Y，长，宽任务一任务一 canvas基础基础绘制矩形的其他相关方法绘制矩形的其他相关方法：(以下方法以下方法均由均由“笔

43、笔”调用调用)方法名的第一个单词首字母小写，其余单词首字母大写：fillStyle=“rgb(*,*,*)”; /设置填充颜色fillRect（x,y,l,w）; /利用设置的填充颜色画实心矩形strokeStyle=“rgb(*,*,*)”; /设置轮廓颜色strokeRect（x,y,l,w）; /利用设置的轮廓颜色画空心矩形*为0255，不同组合代表不同颜色，常用：红（255,0,0），绿（0,255,0），蓝（0,0,255），黑（0,0,0），黄（255,255,0）x,y,l,w：分别代表矩形左上角（起点）坐标(x,y)，l:长，w：宽任务一任务一 canvas基础基础小练习：小练

44、习：思考：如何做出以上效果呢？注意最里面的是实心，每个矩形颜色不一样！任务二任务二 绘制直线绘制直线利用利用JS函数函数在画布中绘制一条直线：在画布中绘制一条直线：function drawLine() /定义js函数，函数名为drawLinevar canvas=document.getElementById(myCanvas); /拿纸var pen=canvas.getContext(2d); /拿笔pen.lineWidth=20; /设置线宽pen.strokeStyle=rgb(200,40,40); /设置画笔颜色pen.beginPath(); /开始新路径(重置内存，每次画前

45、调用)pen.moveTo(10,50); /定义直线的起点坐标pen.lineTo(400,50); /定义直线的终点坐标pen.stroke(); /沿着坐标点开始绘制任务二任务二 绘制直线绘制直线常用常用方法方法/属性属性介绍：介绍：beginPath() : （方法）每次画一条新直线前必须调用（重置内存）moveTo(x,y) : （方法）找到直线起点坐标lineTo(x,y) : （方法）找到直线终点坐标stroke() : (方法) 绘制已定义的路径closePath() : (方法) 关闭绘制路径lineWidth: (属性)线宽，默认为1lineCap: (属性)线帽-butt

46、(默认，无线帽),round,squarestrokeStyle: (属性)绘制路径颜色、渐变、模式任务二任务二 绘制直线绘制直线试试绘制两条不同颜色的交叉直线：试试绘制两条不同颜色的交叉直线：1. 请思考：请思考：beginPath()方法使用和不方法使用和不使用有何区别？使用有何区别？2. 尝试为两条直线加上不同的线帽。尝试为两条直线加上不同的线帽。任务二任务二 绘制直线绘制直线绘制绘制相互链接相互链接的直线，如三角形：的直线，如三角形：只定义第一条直线的起点，剩下的直线只定义终点即可：只定义第一条直线的起点，剩下的直线只定义终点即可：.context.moveTo(50,100);con

47、text.lineTo(100,50);context.lineTo(100,200);context.lineTo(50,100);context.stroke();/若是调用若是调用fill(),则是则是填充这个封闭图形（效果为右边图形）填充这个封闭图形（效果为右边图形）任务二任务二 绘制直线绘制直线小组合作练习：任选一种你喜欢的图形小组合作练习：任选一种你喜欢的图形使用使用JS函数画出：函数画出： 1. 默认线帽默认线帽 2. 线帽为圆形线帽为圆形 3. 3. 展开想象，发挥你的创造展开想象，发挥你的创造力力. . .说明：说明：(1)小组合作完成：设计开发测试提交(2)流程提示：设计图

48、形，选定颜色、线宽、线帽，标明坐标，开始编程(3) 开发流程：创建画布，CSS-画布加边框，JS函数-画图形任务三任务三 绘制弧线绘制弧线/圆圆利用利用JS函数函数在画布中绘制一个圆：在画布中绘制一个圆：function drawCircle() /定义js函数，函数名为drawCirclevar canvas=document.getElementById(myCanvas); /拿纸var pen=canvas.getContext(2d); /拿笔pen.strokeStyle=rgb(200,40,40); /设置画笔颜色pen.arc(150,150,100,0,2*Math.PI)

49、; /设置圆心/半径/开始/结束 pen.stroke(); /沿着坐标点开始绘制任务三任务三 绘制弧线绘制弧线/ /圆圆常用方法介绍：常用方法介绍：arc(x,y,r,start,end,counterclockwise):arc(x,y,r,start,end,counterclockwise):x圆心横坐标y圆心纵坐标r半径start开始角度（画圆从0开始）end结束角度（画圆2结束：2*Math.PI）counterclockwise可选，规定逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。（默认顺时针）任务三任务三 绘制弧线绘制弧线/ /圆圆试试绘制两个同心圆或绘

50、制一个半圆：试试绘制两个同心圆或绘制一个半圆：注意：注意：beginPath()beginPath()的使用！的使用！任务三任务三 绘制弧线绘制弧线/ /圆圆小组合作练习小组合作练习：设计一款新春对联或者：设计一款新春对联或者： 1. 五彩棒棒糖五彩棒棒糖 2. 花样风车花样风车 3. 发挥你想象发挥你想象.（糖葫芦、小汽车、笑（糖葫芦、小汽车、笑脸）脸） 说明：说明：(1)小组合作完成：设计开发测试提交(2)流程提示：设计图形，选定颜色、线宽、线帽，标明坐标，开始编程(3) 开发流程：创建画布，CSS-画布加边框，JS函数-画图形任务三任务三 绘制弧线绘制弧线/ /圆圆拓展应用：使用拓展应用