Web前端开发实例与实战第10 章 高级特性.docxVIP

编写日期：授课日期：任课教师：

课程

名称

《Web前端开发实例与实战》

授课

专业

授课

班级

周次

节次

授课

章节

第10章

高级特性

授课

学时

2学时

教学

目标

知识

1.了解语义元素。

2.了解画布的作用。

能力

1.理解画布中绘制图形的原理。

2.能够绘制阴影。

素质

提升学生的专业技能水平，引导学生自觉践行社会主义核心价值观。

教学

重点

绘制渐变图形

教学

难点

使用路径方法绘制多种图形。

教学

方法

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

教学

用具

多媒体、课件

教学

内容

第10章高级特性

10.1HTML5文档结构

HTML5提供多种标签用于更好地表达HTML文档的结构和语义。同时，HTML5提供了专

门的属性支持元素的拖放效果，增加用户交互的类型。

10.1.1文档结构元素

HTML5中定义了一组新的语义化文档标签来描述元素的内容。这些标签自带语义，对于网页展示更加友好，使用这些标签可以弥补div标签缺乏描述性的问题，从而让整个文档的

结构更加清晰。HTML5中提供的文档结构标签如下所示。

（1）article标签，定义文档内的文章元素，规定独立的自包含内容。

（2）header标签，定义文档或节的页眉，一个文档中可以有多个该标签。

（3）main标签，定义文档的主内容，用于存放整个网页的核心内容，在一个网页中只使用1次。该元素中不包含侧边栏、导航栏、页脚等部分的信息。

（4）nav标签，定义文档内的导航链接，一般位于网站搜索栏下方，会包含网站中所有分页的导航信息。

（5）section标签，定义文档中的节，包括章节、页眉、页脚及其他部分。

（6）aside标签，定义页面内容之外的内容，一般用于定义整个网页或模块中的侧边栏，如提供导航功能。

（7）footer标签，定义文档或节的页脚，位于网页最下方。

10.1.2拖放API

拖放API是HTML5中新增的一种特性。拖放包括拖和放2个部分。文档中所有的元素都是支持拖放的。拖放时首先要将元素设置为可以拖放，然后需要确定将指定元素拖放至什么位置。

1.设置元素可以拖放

设置元素可以拖放通过设置元素的draggable属性为true实现，设置完成后，对应的元素可以支持拖放操作，其语法形式如下所示。

标签draggable=true

2.设置拖放的内容

设置拖放内容是需要将ondragstart鼠标事件添加到对应的标签内，当触发指定的事件，就会调用setData()方法。标签的语法形式如下所示。

标签ondragstart=函数名(event)

3.设置拖放的目标位置

设置拖放的目标位置需要将ondragover鼠标事件添加到目标元素中，并且调用event.preventDefault()方法，标签的语法形式如下所示。

标签ondragover=函数名(event)

4.进行放置元素

进行放置元素需要为目标位置元素添加ondrop鼠标事件，并且触发函数。在函数中调用getData()方法获取拖动的数据，并使用appendChild()方法插入目标元素位置，标签的语法形式如下所示。

标签ondrop=函数名(event)

10.2Canvas绘图

HTML通过标签在文档中提供一块画布。开发者可以在画布中通过JavaScript代码绘制出想要的图形、文字、路径等内容。

10.2.1canvas标签

canvas标签是为了客户端矢量图形而设计的。它可以把一个绘图API展现给客户端。canvas标签由Apple在Safari1.3Web浏览器中引入。

随后，Firefox1.5和Opera9都跟随了Safari的引领也支持canvas标签。在HTML5中canvas标签成为正式标签。canvas标签属于闭合标签，它的功能是在HTML文档中布局一块画布。它支持的属性包括width和height及其他的通用属性，其语法形式如下所示。

canvas元素/canvas

canvas

10.2.2CanvasRenderingContext2D对象

Canvas对象会定义一个API支持脚本化客户端绘图操作。通过Canvas对象的getContext()方法可以获取到一个CanvasRenderingContext2D对象，其语法形式如下所示。

Canvas.getContext(contextID);

10.2.3绘制矩形

绘制图形可以通过属性设置画笔的颜色及图形的填充色，需要使用的属性如

下所示。

（1）fillStyle，设置或返回用于填充绘画的颜色、渐变或模式。

（2）strokeStyle，设置或返回用于笔触的颜色、渐变或模式。

10.2.4绘制图像

绘制图像是指在画布中绘制指定的图片。绘制图像需