第11章HTML5开发实战案例.ppt

11.5.3 文本与图像 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其他插件。任何可以在形状或路径上执行的操作都可以在文本上执行。尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。 11.5.4 笔画与填充 填充色fill属性这个属性使用设置的颜色填充图形内部，使用很简单，直接把颜色值赋给这个属性就可以了。 11.5.5 动画 SVG采用的是使用文本来定义图形，这种文档结构非常适合于创建动画。要改变图形的位置、大小和颜色，只需要调整相应的属性就可以了。事实上，SVG有为各种事件处理而专门设计的属性，甚至很多还是专门为动画量身定做的。 11.6经典习题 1. 填空题 （1）HTML5使用_________标签可以控制视频的播放与停止、循环播放、视频尺寸等。_________标签含有______、______、______、______、______、______、______、______等属性。 （2）HTML5的_________元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。_________拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 2. 上机操作题 使用SVG绘制如图11.26所示的形状。 * 教学内容：在过去的10年里，网页设计师使用 Flash、JavaScript 或其他复杂的软件和技术来创建网站。现在可以使用HTML5实现交互式服务、单页UI、交互式游戏、复杂业务应用。凭借对标准驱动的移动应用开发的支持，以及各种强大特性，HTML5迎来了它的黄金时代。本章就来介绍HTML5开发实战。 第11章 HTML5开发实战 教学重点 掌握HTML5 视频video 掌握HTML5 音频Audio 掌握HTML5 地理定位 掌握HTML5 画布canvas 掌握HTML5 SVG 11.1 HTNL5视频video 以前我们要在网页中嵌入视频的最常用的办法是使用Flash，通过使用object和embed标签，就可以通过浏览器播放SWF、FLV等格式视频文件，但是前提是浏览器必须安装第三方插件Adobe Flash Player。而HTML5的到来，改变了这一事实，只需要使用video标签就可以轻松加载视频文件，而不需要任何第三方插件。 HTML5中的video标签的出现将改变浏览器必须加载插件的情况，进一步改善用户Web体验，让用户在轻松愉快的情况下观看视频。HTML5使用video标签可以控制视频的播放与停止、循环播放、视频尺寸等。Video标签含有src、poster、preload、autoplay、loop、controls、width、height等属性。 11.1.1 video概述 以前网页中的大多数视频是通过插件来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。 11.1.2 在网页中添加视频文件 Source元素用于给媒体指定多个可选择的文件地址，且只能在媒体标签没有使用src属性时使用。source?元素可以链接不同格式的视频文件。浏览器检测并使用第一个可识别的格式。 11.1.3 链接不同的视频文件 HTML5规定了一种通过audio元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。 11.2 HTML5音频Audio 11.2.1 Audio元素简介 在HTML5中，audio元素与video元素非常类似，但audio元素没有视频效果。audio元素是HTML5的一个原生元素，它消除了使用第三方播放器的必要。与video元素类似，可以使用CSS设置audio元素的样式。 在audio标记中，如果不包含controls属性，则audio播放器将不会呈现在页面上。在这种情况下，用户无法使用标准控件来启动音频播放。在不呈现audio播放器的情况下，可以启动audio元素音频播放的方法放在页面的load事件中 。 11.2.2 隐藏audio播放器 11.2.3 使用audio元素的事件 audio可以触发很多事件。其中很多是标准事件，如鼠标单击（click）、鼠标移动（mouse move）、获得焦点（focus）等事件。另外一些则是audio元素所特有的事件，包括播放（play）、暂停（pause）、音量改变（volume change）、播放完毕（ended）等。 11.3 HTML5地理定位 地理定位（Geolocation）就是确定某个设备或用户在地球上所处位置的过程