HTML+CSS+JavaScript网页设计-第5章-网页中的多媒体.ppt

1、HTML+CSS+JavaScript网页设计第5章网页中的多媒体第1页第第5章网页中的多媒体章网页中的多媒体本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第5章网页中的多媒体第2页本章概述本章概述l“超文本超文本”就是指页面内可以包含图片、就是指页面内可以包含图片、声音、动画等非文字元素。网页中的多媒声音、动画等非文字元素。网页中的多媒体有多种不同的格式。本章将学习如何在体有多种不同的格式。本章将学习如何在网页中添加图片、动画、音频、视频等元网页中添加图片、动画、音频、视频等元素，以及如何使用素，以及如何使用canvas元素在网页中绘元素在网页中绘制各种图形、

2、图像等。制各种图形、图像等。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第3页本章的学习目标本章的学习目标l了解常见的图片格式了解常见的图片格式l掌握掌握元素的使用方法元素的使用方法l了解图像映射的创建和使用了解图像映射的创建和使用l掌握掌握元素的使用方法元素的使用方法l掌握掌握元素的使用方法元素的使用方法l掌握掌握元素的使用方法元素的使用方法l了解在网页中嵌入腾讯视频的方法了解在网页中嵌入腾讯视频的方法l理解理解canvas元素的工作原理元素的工作原理l掌握使用掌握使用canvas元素绘制图形元素绘制图形/图像的方法图像的方法HTML+CSS+JavaScript网页设

3、计第5章网页中的多媒体第4页主要内容主要内容5.1 向网页中添加图片向网页中添加图片5.2 为网页添加音频及视频为网页添加音频及视频5.3 绘制图形绘制图形5.4 本章小结本章小结5.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第5章网页中的多媒体第5页5.1 向网页中添加图片向网页中添加图片l一图抵千言，图片是网页中不可缺少的元一图抵千言，图片是网页中不可缺少的元素。在网页中巧妙地使用图片，可以使网素。在网页中巧妙地使用图片，可以使网页图文并茂，大大增强网页的视觉效果，页图文并茂，大大增强网页的视觉效果，令网页更加生动多彩。令网页更加生动多彩。l图片的格式有很多种，

4、图片的格式有很多种，Web上大多数的静上大多数的静态图片都是态图片都是“点阵图像点阵图像”(bitmapped images)。点阵图像将图片分解到由像素组。点阵图像将图片分解到由像素组成的网格中，并分别为每个像素指定色彩成的网格中，并分别为每个像素指定色彩。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第6页图片格式图片格式l浏览器通常支持浏览器通常支持3种常见的点阵图像格式，而且种常见的点阵图像格式，而且大多数图像处理软件也以这些格式保存图片：大多数图像处理软件也以这些格式保存图片：GIF、JPEG和和PNG。l在实际应用中，如果需要在网站中包含很多巨大在实际应用中，如

5、果需要在网站中包含很多巨大且复杂的高分辨率图片，一种推荐做法是在页面且复杂的高分辨率图片，一种推荐做法是在页面初次加载时向用户提供图片的缩小版本，并添加初次加载时向用户提供图片的缩小版本，并添加指向大图的链接。这些缩小版本的图片被称作指向大图的链接。这些缩小版本的图片被称作“缩略图缩略图(thumbnails)”。一般在相册或包含总结。一般在相册或包含总结信息的页面中都使用这种做法。信息的页面中都使用这种做法。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第7页使用使用添加图片添加图片l是一个独立标签，因此没有结束标签是一个独立标签，因此没有结束标签。该元。该元素必须包含两

6、个属性：素必须包含两个属性：src和和alt。src属性用来指明图片来属性用来指明图片来源，其值是一个源，其值是一个URL，可以是绝对，可以是绝对URL，也可以是相对，也可以是相对URL；alt属性是一段对图片进行描述的文本，如果浏览属性是一段对图片进行描述的文本，如果浏览器无法显示图片，该文本内容将代替显示。器无法显示图片，该文本内容将代替显示。l除此之外，还常用到除此之外，还常用到height与与width属性，用来指定图片属性，用来指定图片的高度与宽度。这两个属性的值通常以像素为单位，也可的高度与宽度。这两个属性的值通常以像素为单位，也可以是百分比。指定图片的显示高度和宽度有利于使页面更

7、以是百分比。指定图片的显示高度和宽度有利于使页面更快、更平滑地得到加载，因为浏览器会知道应该为图片分快、更平滑地得到加载，因为浏览器会知道应该为图片分配多大的空间，因此它可以在图片还在载入的同时准确地配多大的空间，因此它可以在图片还在载入的同时准确地渲染页面的其他部分。渲染页面的其他部分。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第8页将图片转换为链接将图片转换为链接l将图片转换为链接很简单。相比于将文本置于开将图片转换为链接很简单。相比于将文本置于开标签标签和闭标签和闭标签之间，图片链接只需要将之间，图片链接只需要将元素放置于这些标签内即可。例如，将【元素放置于这些标

8、签内即可。例如，将【例例5-1】中的】中的logo图片链接到一个企业网站，可以图片链接到一个企业网站，可以这样修改代码：这样修改代码：l这样，图片就变成了一个超链接，单击图片将跳这样，图片就变成了一个超链接，单击图片将跳转到指定的转到指定的URL。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第9页创建图像映射创建图像映射l创建图像映射用到了创建图像映射用到了和和两个元素：两个元素：map元素用于定义客户端图像映射。图像映射指带有元素用于定义客户端图像映射。图像映射指带有可单击区域的一幅图像，可单击区域的一幅图像，中的中的usemap属性可引属性可引用用中的中的id或或na

9、me属性属性(取决于浏览器取决于浏览器)，所以，所以，创建图像映射时，应同时向创建图像映射时，应同时向添加添加id和和name属性属性。area元素用于定义图像映射中的区域，当用户单击这元素用于定义图像映射中的区域，当用户单击这个区域时即可链接到指定的页面。个区域时即可链接到指定的页面。area元素永远嵌套元素永远嵌套在在map元素内部，通过元素内部，通过shape属性指定所选区域的形属性指定所选区域的形状，然后使用状，然后使用coords属性指定区域的坐标。属性指定区域的坐标。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第10页主要内容主要内容5.1 向网页中添加图片向

10、网页中添加图片5.2 为网页添加音频及视频为网页添加音频及视频5.3 绘制图形绘制图形5.4 本章小结本章小结5.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第5章网页中的多媒体第11页5.2 为网页添加音频及视频为网页添加音频及视频lWeb上的多媒体应用经历了重大改进，从上的多媒体应用经历了重大改进，从最初简单的最初简单的MIDI和和GIF动画，发展到现在随动画，发展到现在随处可见的处可见的MP3音乐、音乐、Flash动画和各种在线动画和各种在线视频，同时也产生了用于播放多媒体内容视频，同时也产生了用于播放多媒体内容的各种工具和插件，如的各种工具和插件，如Windo

11、ws Media Player、Flash Player、Real Player等。等。HTML 5为多媒体播放新增了两个重要元素为多媒体播放新增了两个重要元素audio和和videoHTML+CSS+JavaScript网页设计第5章网页中的多媒体第12页元素元素l在在HTML5之前，大多数音频是通过插件之前，大多数音频是通过插件(如如Flash)来播放的。然而，并非所有浏览器都拥有来播放的。然而，并非所有浏览器都拥有同样的插件。因此，同样的插件。因此，HTML5规定了在网页上嵌入规定了在网页上嵌入音频元素的标准，即使用音频元素的标准，即使用audio元素。元素。l 标签定义声音，比如音乐或

12、其他音频流标签定义声音，比如音乐或其他音频流。目前，。目前，元素支持元素支持3种文件格式：种文件格式：MP3、Wav、Ogg。可以在。可以在和和之间放之间放置文本，当浏览器不支持置文本，当浏览器不支持标签时将显示标签时将显示这些文本信息。这些文本信息。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第13页元素元素l如果不确定浏览器支持的音频格式，则如果不确定浏览器支持的音频格式，则可以不使用可以不使用src属性，而使用多个属性，而使用多个source元元素链接不同的音频文件，浏览器将使用第素链接不同的音频文件，浏览器将使用第一个支持的音频文件。一个支持的音频文件。lsour

13、ce元素用来为媒体元素元素用来为媒体元素(如如和和)定义媒体资源，通过定义媒体资源，通过src属性指定属性指定媒体文件的媒体文件的URL，使用，使用type指定媒体资源指定媒体资源的的MIME类型。类型。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第14页video元素元素lvideo元素的使用格式和元素的使用格式和audio元素的使用格式非元素的使用格式非常相似，也是通过常相似，也是通过source元素来组织视频文件资元素来组织视频文件资源。源。video元素提供播放、暂停和音量控件来控元素提供播放、暂停和音量控件来控制视频，同时提供制视频，同时提供width和和hei

14、ght属性来控制视属性来控制视频的尺寸。如果设置了高度和宽度，那儿所需的频的尺寸。如果设置了高度和宽度，那儿所需的视频空间会在页面加载时保留。如果没有设置这视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不些属性，浏览器不知道大小的视频，浏览器就不会在加载时保留特定的空间，页面会根据原始视会在加载时保留特定的空间，页面会根据原始视频的大小而改变。另外，在频的大小而改变。另外，在与与标签之间插入的内容被提供给不支持标签之间插入的内容被提供给不支持video元素元素的浏览器显示。的浏览器显示。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第15

15、页video元素元素lvideo元素拥有和元素拥有和audio元素类似的方法、元素类似的方法、属性和事件。属性和事件。video元素的方法、属性和事元素的方法、属性和事件也可以使用件也可以使用JavaScript进行控制。其中进行控制。其中，video元素的方法用于播放、暂停以及加元素的方法用于播放、暂停以及加载等控制；属性用于读取或设置视频的时载等控制；属性用于读取或设置视频的时长、音量等。可以通过长、音量等。可以通过DOM事件通知事件通知video元素开始播放、已暂停、已停止等。元素开始播放、已暂停、已停止等。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第16页 元素

16、元素l也是也是HTML5中的新增元素，这是一中的新增元素，这是一个行内标记，可以播放音频、视频和个行内标记，可以播放音频、视频和Flash动画动画等多媒体文件，其用法与前面介绍的等多媒体文件，其用法与前面介绍的和和元素类似。元素类似。l标签定义了一个容器，用来嵌入外部应标签定义了一个容器，用来嵌入外部应用或者互动程序用或者互动程序(插件插件)。前面播放音频和视频的。前面播放音频和视频的例子也可以使用例子也可以使用来完成，相应的代码如来完成，相应的代码如下：下：l如果播放的是视频文件，还可以使用如果播放的是视频文件，还可以使用width和和height属性指定视频窗口的大小。属性指定视频窗口的大

17、小。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第17页在页面中嵌入腾讯视频在页面中嵌入腾讯视频l首先，打开腾讯视频网站首页，选择首先，打开腾讯视频网站首页，选择“电视剧电视剧”，在，在“热剧精选热剧精选”中就有如懿传，如果没有中就有如懿传，如果没有可以通过搜索找到，然后进入该剧的首页，在剧可以通过搜索找到，然后进入该剧的首页，在剧集列表中单击集列表中单击“01”即可开始在线观看，此时浏即可开始在线观看，此时浏览器地址栏中即为该集的播放地址：览器地址栏中即为该集的播放地址：https:/ frame)，是一个特殊的元素，它可以使用，是一个特殊的元素，它可以使用src属性在

18、一个网页中嵌入另一个网页。属性在一个网页中嵌入另一个网页。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第19页主要内容主要内容5.1 向网页中添加图片向网页中添加图片5.2 为网页添加音频及视频为网页添加音频及视频5.3 绘制图形绘制图形5.4 本章小结本章小结5.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第5章网页中的多媒体5.3 绘制图形绘制图形lHTML 5新增了一个绘图接口新增了一个绘图接口canvas元素，元素，通过这个接口，用户可以在通过这个接口，用户可以在Web中绘制图形。绘中绘制图形。绘制图形时，首先在页面上放置一个制图形时，首

19、先在页面上放置一个canvas元素，元素，就相当于在页面上放置了一块画布，可以在这块就相当于在页面上放置了一块画布，可以在这块画布中进行图形绘制，但并不是用鼠标画图。本画布中进行图形绘制，但并不是用鼠标画图。本节就来介绍如何使用节就来介绍如何使用canvas元素绘制各种图形。元素绘制各种图形。l实际上，实际上，canvas只是一块无色透明的区域，只是只是一块无色透明的区域，只是一个一个JavaScript API，需要通过，需要通过JavaScript编写编写绘制图形的脚本。绘制图形的脚本。JavaScript将在本书第将在本书第10章详章详细介绍，本节用到的细介绍，本节用到的JavaScri

20、pt脚本比较简单，脚本比较简单，读者只要理解其功能会仿照使用即可。读者只要理解其功能会仿照使用即可。第20页HTML+CSS+JavaScript网页设计第5章网页中的多媒体使用使用canvas元素元素lcanvas元素能够在网页中创建一块矩形区域，这块矩形元素能够在网页中创建一块矩形区域，这块矩形区域称为画布，在其中可以绘制各种图形区域称为画布，在其中可以绘制各种图形l在在HTML页面中添加页面中添加canvas元素的方法和添加其他的元素元素的方法和添加其他的元素一样，例如下面的代码创建了一个宽一样，例如下面的代码创建了一个宽400像素、高像素、高300像像素的素的canvas对象。：对象。

21、：该浏览器该浏览器不支持不支持HTML5的画布标记！的画布标记！lcanvas元素本身并不能实现图形绘制功能，绘制图形的元素本身并不能实现图形绘制功能，绘制图形的工作需要由工作需要由JavaScript来完成。使用来完成。使用JavaScript可以在可以在canvas元素内部添加线条、图片和文字，也可以在其中元素内部添加线条、图片和文字，也可以在其中绘画，还能够加入高级动画。绘画，还能够加入高级动画。第21页HTML+CSS+JavaScript网页设计第5章网页中的多媒体使用使用canvas元素绘制图形的步骤元素绘制图形的步骤l(1)在页面中添加在页面中添加canvas元素，必须定义元素，

22、必须定义canvas元素的元素的id属性值，以便在属性值，以便在JavaScript脚本这调用脚本这调用l(2)在在JavaScript脚本中通过脚本中通过id找到找到canvas元素元素l(3)通过通过canvas元素的元素的getContext方法获取其上方法获取其上下文，即创建下文，即创建Context对象，获取可绘制图形的对象，获取可绘制图形的2D环境环境l(4)使用使用Context对象的方法进行图形绘制对象的方法进行图形绘制第22页HTML+CSS+JavaScript网页设计第5章网页中的多媒体CanvasRenderingContext2D对象对象l通过通过canvas对象的对

23、象的getContext(2d)方法方法返回的是一个返回的是一个CanvasRenderingContext2D对象。对象。lCanvasRenderingContext2D对象提供了对象提供了一组用来在画布上绘制图形的方法。使用一组用来在画布上绘制图形的方法。使用这些方法可以绘制各种图形、图像等这些方法可以绘制各种图形、图像等第23页HTML+CSS+JavaScript网页设计第5章网页中的多媒体绘制简单图形绘制简单图形l使用使用canvas元素绘制图形时需要注意，每元素绘制图形时需要注意，每个个canvas上下文仅有一个当前上下文仅有一个当前Path。通过。通过beginPath方法可以

24、开始一个方法可以开始一个Path，通过，通过closePath方法结束一个方法结束一个Path。对于填充类。对于填充类的图形，通过的图形，通过fillStyle属性设置填充颜色，属性设置填充颜色，绘制图形边框的颜色通过绘制图形边框的颜色通过strokeStyle属性属性设置。设置。第24页HTML+CSS+JavaScript网页设计第5章网页中的多媒体清空画布清空画布l常见的清空画布的方法有以下常见的清空画布的方法有以下3种：种：l第一种，也就是最简单的办法，由于第一种，也就是最简单的办法，由于canvas每当高度或宽度被重设时，画布内每当高度或宽度被重设时，画布内容就会被清空，因此可以通过

25、设置高度或容就会被清空，因此可以通过设置高度或宽度来清空画布宽度来清空画布l第二种方法是使用第二种方法是使用clearRect方法方法l第三种方法类似于第二种方法，可以用某第三种方法类似于第二种方法，可以用某一特定颜色填充画布，从而达到清空的目一特定颜色填充画布，从而达到清空的目的的第25页HTML+CSS+JavaScript网页设计第5章网页中的多媒体保存与恢复保存与恢复canvas状态状态l当在画布上使用其当在画布上使用其2D上下文进行图形绘制时，可以通过上下文进行图形绘制时，可以通过操作操作2D上下文属性来绘制不同风格的图形，例如不同的上下文属性来绘制不同风格的图形，例如不同的线条、填

26、充等。通常情况下，在画布上绘图时，需要更改线条、填充等。通常情况下，在画布上绘图时，需要更改在绘制的在绘制的2D背景下的状态。例如，需要设置背景下的状态。例如，需要设置strokStyle属属性或进行旋转操作等，这些操作通过设置性或进行旋转操作等，这些操作通过设置2D上下文属性上下文属性来实现。由于设置绘图的属性非常烦琐，每次更改时都要来实现。由于设置绘图的属性非常烦琐，每次更改时都要重来一次，因此，我们可以考虑利用堆栈来保持绘图的属重来一次，因此，我们可以考虑利用堆栈来保持绘图的属性并在需要的时候随时恢复。这就用到了下面两个方法：性并在需要的时候随时恢复。这就用到了下面两个方法：lconte

27、xt.save();lcontext.restore();第26页HTML+CSS+JavaScript网页设计第5章网页中的多媒体移动坐标空间移动坐标空间lcanvas坐标空间默认以画布左上角为原点坐标空间默认以画布左上角为原点，x轴水平向右为正方向，轴水平向右为正方向，y轴垂直向下为轴垂直向下为正方向，该坐标空间的单位通常为像素。正方向，该坐标空间的单位通常为像素。在绘制图形时，可以使用在绘制图形时，可以使用translate方法移方法移动坐标空间，使画布的变换矩阵发生水平动坐标空间，使画布的变换矩阵发生水平和垂直方向的偏移，其用法如下：和垂直方向的偏移，其用法如下：context.tra

28、nslate(dx,dy);l其中，其中，dx、dy分别为坐标原点沿水平和垂分别为坐标原点沿水平和垂直两个方向的偏移量直两个方向的偏移量第27页HTML+CSS+JavaScript网页设计第5章网页中的多媒体旋转坐标空间旋转坐标空间l若要旋转坐标空间，应使用若要旋转坐标空间，应使用rotate方法。方法。rotate方法用于以原点为中心旋转方法用于以原点为中心旋转canvas，实质上仍是旋转，实质上仍是旋转canvas上下文对象的坐上下文对象的坐标空间，用法如下：标空间，用法如下：context.rotate(angle);l其中，参数其中，参数angle为旋转的角度，旋转角度为旋转的角度，

29、旋转角度以顺时针方向为正方向，以弧度为单位，以顺时针方向为正方向，以弧度为单位，旋转中心为旋转中心为canvas的原点的原点第28页HTML+CSS+JavaScript网页设计第5章网页中的多媒体缩放图形缩放图形l缩放图形主要通过缩放图形主要通过scale方法来实现，具体方法来实现，具体使用格式如下：使用格式如下：context.scale(x,y);l其中，参数其中，参数x为为x轴的缩放，参数轴的缩放，参数y为为y轴的轴的缩放。如果要缩小，参数值为小于缩放。如果要缩小，参数值为小于1的数值的数值；如果要放大，参数值为大于；如果要放大，参数值为大于1的数值。的数值。第29页HTML+CSS+

30、JavaScript网页设计第5章网页中的多媒体使用渐变色填充图形使用渐变色填充图形l线性渐变：是指从开始点到结束点，颜色呈直线的徐徐变线性渐变：是指从开始点到结束点，颜色呈直线的徐徐变化的效果。为了实现这种效果，我们绘制时必须指定开始化的效果。为了实现这种效果，我们绘制时必须指定开始和结束的颜色。而在和结束的颜色。而在canvas中，不仅可以只指定开始和中，不仅可以只指定开始和结尾的两点，中间位置也能指定。使用表结尾的两点，中间位置也能指定。使用表5-2中的中的createLinearGradient方法创建一个代表线性渐变的方法创建一个代表线性渐变的CanvasGradient对象，通过这

31、个对象的对象，通过这个对象的addColorStop方法添加颜色。方法添加颜色。l放射性渐变：也叫环形渐变，实现由圆心放射性渐变：也叫环形渐变，实现由圆心(或是较小的同或是较小的同心圆心圆)开始向外扩散渐变的效果。使用表开始向外扩散渐变的效果。使用表5-2中的中的createRadialGradient方法来创建一个代表放射颜色渐变方法来创建一个代表放射颜色渐变的的CanvasGradient对象，需要指定起始圆和结束圆的圆对象，需要指定起始圆和结束圆的圆心和半径。心和半径。第30页HTML+CSS+JavaScript网页设计第5章网页中的多媒体使用图案填充图形使用图案填充图形l在在canv

32、as中，中，createPattern方法用来实现图案效果，在方法用来实现图案效果，在指定的方向重复指定的元素。元素可以是图片、视频或其指定的方向重复指定的元素。元素可以是图片、视频或其他他canvas元素。被重复的元素可用于绘制元素。被重复的元素可用于绘制/填充矩形、圆填充矩形、圆形或线条等。其用法如下：形或线条等。其用法如下：context.createPattern(image,repeat|repeat-x|repeat-y|no-repeat);l其中，其中，image是要使用的图片、画布或视频元素；第是要使用的图片、画布或视频元素；第2个个参数是指定图案重复的模式，默认为参数是指定

33、图案重复的模式，默认为repeat，该模式在水，该模式在水平和垂直方向重复，也可以指定为平和垂直方向重复，也可以指定为repeat-x(只在水平方只在水平方向重复向重复)、repeat-y(只在垂直方向重复只在垂直方向重复)和和no-repeat(不重不重复复)。第31页HTML+CSS+JavaScript网页设计第5章网页中的多媒体设置图形的透明度设置图形的透明度l使用使用rgba方法可以设置具有透明度的颜色方法可以设置具有透明度的颜色，用法如下：，用法如下：rgba(R,G,B,A)l其中，其中，R、G、B为为0255的十进制整数，的十进制整数，分别表示颜色的红色、绿色和蓝色分量，分别表

34、示颜色的红色、绿色和蓝色分量，是透明度，为是透明度，为0.01.0的浮点数值，的浮点数值，0.0为完为完全透明，全透明，1.0为完全不透明。为完全不透明。第32页HTML+CSS+JavaScript网页设计第5章网页中的多媒体创建阴影创建阴影l与阴影相关的属性有与阴影相关的属性有4个：个：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。其中，。其中，shadowColor定定义阴影颜色样式，义阴影颜色样式，shadowBlur定义阴影模定义阴影模糊系数，糊系数，shadowOffsetX定义阴影的定义阴影的x轴偏轴偏移量，移量，shado

35、wOffsetY定义阴影的定义阴影的y轴偏移轴偏移量。需要注意的是，定义量。需要注意的是，定义shadowColor后后，至少需要用，至少需要用shadowBlur定义阴影模糊系定义阴影模糊系数，否则看不到阴影效果。数，否则看不到阴影效果。第33页HTML+CSS+JavaScript网页设计第5章网页中的多媒体drawImage()方法方法ldrawImage()方法用来在画布上绘制图像、画布或视频。该方法用来在画布上绘制图像、画布或视频。该方法也能够绘制图像的某些部分，或者增加或减少图像的尺方法也能够绘制图像的某些部分，或者增加或减少图像的尺寸。寸。l最简单的最简单的drawImage()

36、方法只需指定图像和图像在画布中的方法只需指定图像和图像在画布中的位置，如下所示：位置，如下所示：context.drawImage(img,x,y);l也可以在绘制图像时指定图像的宽度和高度：也可以在绘制图像时指定图像的宽度和高度：context.drawImage(img,x,y,width,height);l还可以只剪切图像的某个矩形区域，并将其绘制到画布：还可以只剪切图像的某个矩形区域，并将其绘制到画布：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);l其中，其中，sx和和xy为开始剪切的为开始剪切的x、y坐标；坐

37、标；swidth和和sheight为为剪切的宽度和高度。剪切的宽度和高度。第34页HTML+CSS+JavaScript网页设计第5章网页中的多媒体使用任意路径剪裁图像使用任意路径剪裁图像lcanvas的图像裁剪功能是指，在画布内使用的图像裁剪功能是指，在画布内使用路径，只绘制路径所包括区域内的图像，不路径，只绘制路径所包括区域内的图像，不绘制路径外部的图像。前面使用绘制路径外部的图像。前面使用drawImage()方法只能剪裁矩形区域，要使方法只能剪裁矩形区域，要使用任意路径剪裁图像可以使用用任意路径剪裁图像可以使用CanvasRenderingContext2D对象的不带参对象的不带参数的

38、数的clip方法来实现。方法来实现。clip方法使用路径来对方法使用路径来对canvas画布设置一块裁剪区域。因此，必须画布设置一块裁剪区域。因此，必须先创建路径。路径创建完毕后，调用先创建路径。路径创建完毕后，调用clip方方法来设置裁剪区域。法来设置裁剪区域。第35页HTML+CSS+JavaScript网页设计第5章网页中的多媒体混合图像混合图像l混合模式是指将上层的图像融入下层的图像混合模式是指将上层的图像融入下层的图像时采用的各种模式。根据所选的模式，可以时采用的各种模式。根据所选的模式，可以看到不同的融合后的效果。看到不同的融合后的效果。l混合模式采取铺设在彼此顶部的两个像素，混合

39、模式采取铺设在彼此顶部的两个像素，并结合它们不同的方式进行展现，例如较深并结合它们不同的方式进行展现，例如较深的颜色混合模式只会呈现两个像素的颜色较的颜色混合模式只会呈现两个像素的颜色较深。深。在扩展到整个图像时，混合模式可以产在扩展到整个图像时，混合模式可以产生一些令人惊艳的效果。生一些令人惊艳的效果。第36页HTML+CSS+JavaScript网页设计第5章网页中的多媒体绘制文本绘制文本l绘制文本用到了绘制文本用到了canvas对象的对象的fillText和和strokeText方法。在绘方法。在绘制文本之前，可以先对有关文字绘制的属性进行设置，这些属制文本之前，可以先对有关文字绘制的属

40、性进行设置，这些属性包括：性包括：font：指定要绘制的文本的字体样式，默认的字体样式为：指定要绘制的文本的字体样式，默认的字体样式为10px sans-serif，设置该属性的语法与，设置该属性的语法与 CSS font属性相同，本书第属性相同，本书第8章会详细介绍章会详细介绍textAlign：指定绘制文本的对齐方式，有：指定绘制文本的对齐方式，有left(左对齐左对齐)、right(右对齐右对齐)、center(居中对齐居中对齐)、start(如果文字从左往右排版，则左对齐；如果从右如果文字从左往右排版，则左对齐；如果从右往左排版，则右对齐往左排版，则右对齐)和和end(效果和效果和st

41、art对齐方式正好相反对齐方式正好相反)5种对齐方式种对齐方式，默认为，默认为start。textBaseline：指定绘制文本时的当前文本基线，有：指定绘制文本时的当前文本基线，有6个可取值，默认为个可取值，默认为alphabetic(文本基线是普通的字母基线文本基线是普通的字母基线)，还有，还有top(文本基线是文本基线是em方框方框的顶端的顶端)、hanging(文本基线是悬挂基线文本基线是悬挂基线)、middle(文本基线是文本基线是em方框方框的正中的正中)、ideographic(文本基线是表意基线文本基线是表意基线)和和bottom(文本基线是文本基线是 em 方框的底端方框的底

42、端)第37页HTML+CSS+JavaScript网页设计第5章网页中的多媒体第38页主要内容主要内容5.1 向网页中添加图片向网页中添加图片5.2 为网页添加音频及视频为网页添加音频及视频5.3 绘制图形绘制图形5.4 本章小结本章小结5.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第5章网页中的多媒体第39页5.4 本章小结本章小结 l本章主要介绍了本章主要介绍了HTML中的多媒体元素。首先介绍了向网页中添加图中的多媒体元素。首先介绍了向网页中添加图片，图片可以增强网页的视觉效果，令网页更加生动多彩，片，图片可以增强网页的视觉效果，令网页更加生动多彩，HTML提提

43、供了供了元素来在网页中添加图片，结合前面学过的元素来在网页中添加图片，结合前面学过的元素可以元素可以将图片转换为链接，通过图像映射还可以将一幅图像分为几个部分，将图片转换为链接，通过图像映射还可以将一幅图像分为几个部分，分别链接到不同的页面；接着介绍了如何在网页中添加音频和视频，分别链接到不同的页面；接着介绍了如何在网页中添加音频和视频，主要包括主要包括、元素的使用以及使用元素的使用以及使用在页面中嵌入其他视频网站中的视频；最后介绍了在页面中嵌入其他视频网站中的视频；最后介绍了HTML 5新增的画布元素新增的画布元素canvas，canvas提供了一个允许开发人员在网页上提供了一个允许开发人员

44、在网页上绘制图形的接口，在页面上放置一个绘制图形的接口，在页面上放置一个canvas元素，就相当于在页面元素，就相当于在页面上放置了一块画布，然后在这块画布上绘制各种图形和图像。通过本上放置了一块画布，然后在这块画布上绘制各种图形和图像。通过本章的学习，读者应该掌握如何向网页中添加图片、声音、视频等多媒章的学习，读者应该掌握如何向网页中添加图片、声音、视频等多媒体元素，能够制作出具有丰富的视听效果的网页。体元素，能够制作出具有丰富的视听效果的网页。HTML+CSS+JavaScript网页设计第5章网页中的多媒体第40页主要内容主要内容5.1 向网页中添加图片向网页中添加图片5.2 为网页添加

45、音频及视频为网页添加音频及视频5.3 绘制图形绘制图形5.4 本章小结本章小结5.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第5章网页中的多媒体第41页5.5 思考和练习思考和练习 l1.图片中每平方英寸的像素数称为图片的图片中每平方英寸的像素数称为图片的 。l2.添加图片需要使用添加图片需要使用元素，元素，是一个独立标签是一个独立标签，因此没有结束标签，因此没有结束标签。该元素必须包含两个属性。该元素必须包含两个属性 和和 。l3.创建图像映射用到了创建图像映射用到了 和和 元素。元素。l4.在在和和之间的文本有什么作用？之间的文本有什么作用？l5.HTML 5规定了一种通过规定了一种通过 元素来包含视频的标准方元素来包含视频的标准方法。法。l6.HTML 5新增了一个绘图接口新增了一个绘图接口 元素，通过这个元素，通过这个接口，用户可以在接口，用户可以在Web中绘制图形。中绘制图形。