HTML 零基础学习笔记 06 - 图形；媒体；APIs

2024-02-07 14:51:35

参考文章或资源（顺致谢意）

1. HTML 教程 (w3school.com.cn)s

HTML5 图形

HTML5 Canvas 画布
HTML5 内联 SVG

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

创建 Canvas 元素：向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度：

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

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

JavaScript 使用 id 来寻找 canvas 元素：然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 的优势

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

把 SVG 直接嵌入 HTML 页面

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

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 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>

HTML 5 Canvas vs. SVG

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

HTML 多媒体

Web 上的多媒体指的是

音效
音乐
视频
动画

多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

多媒体元素（比如视频和音频）存储于媒体文件中，确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

HTML 插件

插件（Plug-in）是扩展浏览器标准功能的计算机程序

运行 Java 小程序
运行 ActiveX 控件
显示 Flash 电影
显示地图
扫描病毒
验证银行账号

警告！

大多数浏览器不再支持 Java Applet 和插件。

所有浏览器均不再支持 ActiveX 控件。

在现代浏览器中，对 Shockwave Flash 的支持也已关闭。

<object> 元素

所有浏览器均支持 <object> 元素。

<object> 元素定义 HTML 文档中的嵌入式对象。

它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中：（用data属性指定）

<object width="100%" height="500px" data="snippet.html"></object>

<embed> 元素

所有主要浏览器均支持 <embed> 元素。

<embed> 元素也可定义了 HTML 文档中的嵌入式对象。

Web 浏览器长期以来一直支持 <embed> 元素。但是，它不属于 HTML5 之前的 HTML 规范的一部分。

请注意，<embed> 元素没有结束标记。它无法包含替代文本。

<embed> 元素也可用于在 HTML 中包含 HTML：

<embed width="100%" height="500px" src="snippet.html">

HTML 音频

在 HTML 中播放声音的方法有很多种

使用插件
使用 HTML5 <audio> 元素
雅虎的媒体播放器
使用超链接

HTML 视频

在 HTML 中播放视频的方法有很多种。

使用 <embed> 标签
使用 <object> 标签
使用 <video> 标签
HTML 5 + <object> + <embed>
优酷解决方案
使用超链接
使用 YouTube。

HTML APIs

HTML5 地理定位
HTML5 拖放
HTML 本地存储
HTML5 应用程序缓存
HTML Web Workers
HTML Server-Sent 事件

-------------------------------我是一个分割符---------------------------------------

HTML学习的第一阶段结束了，几乎只是一个非常粗略的映像，学完CSS后会回来做一个复习和总结。

开始学习CSS，见“CSS零基础学习笔记”

【我是飞哥，陪你飞是我的快乐！】2021.07.20

码农公寓