第二十一章：多媒体和图形编程

最新推荐文章于 2022-07-27 00:45:34 发布

走在大前端的路上

最新推荐文章于 2022-07-27 00:45:34 发布

阅读量250

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/u012211003/article/details/119353178

版权

JavaScript学习笔记专栏收录该内容

18 篇文章 3 订阅

订阅专栏

在浏览器中动态生成复杂图形是非常重要的，因为：

用于在客户端生成图形的代码大小要比图片本身小很多，这样可以减少部分带宽。
通过一些实时数据来动态生成图形，需要消耗大量的CPU周期。而如果把这个任务放到客户端做，就可以有效地减轻服务器的负担，某种程度上也是节约了硬件开销。
在客户端生成图形也是符合现代Web应用的架构：服务器提供数据，然后客户端负责展现这些数据。

脚本化图片

如下的HTML代码段是一个非常简单的例子：它创建一张图片，并在鼠标指针经过的时候改变该图片：

＜img src="images/help.gif"
      onmouseover="this.src='images/help_rollover.gif'"
      onmouseout="this.src='images/help.gif'"＞

因为没有缓存文件，所以非常慢，所以为了提高用户体验，可以使用 (new Image()).src = "" ;提前将文件缓存好：

<script>(new Image()).src="images/help_rollover.gif";</script>
<img src="images/help.gif"
     onmouseover="this.src='images/help_rollover.gif'"
     onmouseout="this.src='images/help.gif'">

脚本化音频和视频

HTML5引入audio 标签和 video 标签：

<audio src="background_music.mp3"/>
<video src="news.mov"width=320 height=240/>

由于各家浏览器制造商未能在对标准音频和视频编解码器支持上达成一致，因此，通常都需要使用＜source＞元素来为指定不同格式的媒体源：

<audio id="music">
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type='audio/ogg; codec="vorbis"'>
</audio>

需要注意的是，<source>元素没有任何内容：没有闭合的</source>标签，也不需要用"/>"来结束它们。

audio标签和 video 标签支持 conntrols 属性，如果设置了，将会显示一些列的播放控件，包括播放，暂停按钮和音量控制等等。

audio标签的属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放、暂停等。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。使用autoplay后该属性会被忽略
src	url	需要播放的音频的URL。

video标签的属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

使用DOM控制video的方法、属性以及事件：

下面列出了大多数浏览器支持的视频方法、属性和事件：

方法	属性	事件
play() 视频播放	currentSrc 返回当前资源的 URL	play 播放时
pause() 视频暂停	currentTime 当前播放的位置，赋值可改变位置	pause 暂停时
load() 重新加载src指定的资源	videoWidth 视频宽度	progress
canPlayType 是否能播放某种格式的资源	videoHeight 视频高度	error
	duration 当前视频长度（秒）	timeupdate 播放位置更改时
	ended 是否结束	ended
	error 是否有错（null为正常）	abort
	paused 是否暂停	empty
	muted 静音	emptied
	seeking	waiting
	volume 音量	loadedmetadata
	height 设置视频高度
	width 设置视频宽度

注释： 在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

SVG指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；
SVG 是可伸缩的；
SVG 图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大

在HTML5 中，能够将 SVG 元素直接嵌入 HTML 页面中：

<!DOCTYPE html>
<html>
    <body>
        <svg height="190">
            <polygon points="100,10 40,180 190,60 10,60 160,180"
                style="fill:lime;
                       stroke:purple;
                       stroke-width:5;
                       fill-rule:evenodd;" />
        </svg>
    </body>
</html>

效果：

canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素:

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制:

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
let c = document.getElementById("myCanvas");
let cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素：

let c = document.getElementById("myCanvas");

然后，创建 context 对象：

let cxt = c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

理解坐标:

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

效果：

通过规定尺寸、颜色和位置，来绘制一个圆：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
let c = document.getElementById("myCanvas");
let cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

效果：

走在大前端的路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二十一章：多媒体和图形编程

在浏览器中动态生成复杂图形是非常重要的，因为：用于在客户端生成图形的代码大小要比图片本身小很多，这样可以减少部分带宽。通过一些实时数据来动态生成图形，需要消耗大量的CPU周期。而如果把这个任务放到客户端做，就可以有效地减轻服务器的负担，某种程度上也是节约了硬件开销。在客户端生成图形也是符合现代Web应用的架构：服务器提供数据，然后客户端负责展现这些数据。脚本化图片如下的HTML代码段是一个非常简单的例子：它创建一张图片，并在鼠标指针经过的时候改变该图...
复制链接

扫一扫

专栏目录