TML5不是一个新的现象，但HTML5的使用在过去几年中已经有了飞速的发展。当涉及到富媒体，运动图形和网络上的互动内容时，HTML5几乎完全取代了Flash的使用。由于移动应用程序开发人员的性能，易于使用和开放标准的剪切原因，它也受到了很大的调整。

HTML5的前身HTML4有许多改进，其中之一是包含用于在网页上即时渲染图形的canvas元素。

让我们看看HTML5动画的基础知识，然后再转到用于创建动画横幅，广告，丰富的互动内容，电子贺卡，信息图表，幻灯片，动态图形，游戏等各种工具。

HTML5动画 - 基础知识

HTML5动画包含在<canvas> </ canvas>元素中。为了一个基本的了解，html文档中的canvas可以被看作是一个绘图板，您可以在其中绘制形状，然后快速更改框架，使其看起来像一个动画图形。

基本动画的步骤非常简单，您可以通过在HTML5，CSS和JavaScript中手动编写代码来创建基本动画。复杂的动画可以通过使用HTML5动画工具来实现，该工具提供拖放功能来创建HTML5形状，还可以添加动画和交互。

这些工具通常会生成人类可读的代码，如果需要，可以进行修改，当然，代码可以包含在HTML文档中，也可以在手机，PC，平板电脑和智能电视上运行。其中一些工具包括Bannersnack，Mugeda，GSAP，Animatron，Edge Animate，HTML5 Maker和Tumult Hype等名称。

让我们来看一下非常基本的动画的解剖（只是为了得到它的悬念），我们将看看用于使用HTML5创建动画的各种工具。

创建简单的HTML5动画

要创建动画，您需要在文档和机制中的形状，图像，音频，视频来控制和操作所有这些您想要的方式。

可以使用HTML5方法绘制形状，而图像，音频，视频等可以通过引用导入文档。控件可以通过Canvas API，CSS3元素中的直接方法或使用自定义JavaScript函数进行。

我们来看看画布的设置，这是一个简单的四步过程 -

第一步是清除整个画布，让你得到一个空白的画面。您可以使用clearRect（）方法来执行此操作。第二步是保存画布状态，这很重要，因为在进行了更改之后，你会想回到原始状态。

第三步是很好的部分，您将在此绘制动画形状并为动画创建框架。第四步是保存帧状态，循环继续 - 返回原始状态，画出下一帧并保存。

通过直接使用像rect（），fillRect（），fillStyle（）和drawImage（）等画布方法绘制形状，或通过创建和调用自定义JavaScript函数来绘制形状。像我之前说过的，图像，音频和视频可以通过使用许多其他方法包含在空间和时间中，以便您拥有创建动画所需的一切。

对于动画，我们需要调用画布状态（在绘制过程中保存）并在一段时间内渲染不同的帧，为此，有三个JavaScript函数，即window.setInterval（），window.setTimeout（）和窗口.requestAnimationFrame（）。还有其他的方法，但现在我们将会保持我们的马。查看Mozilla开发人员，了解使用各种方法在画布中绘制和动画的基础知识。

您还可以查看循环动画和动画太阳系，以查看HTML5动画以及代码，以便更好地了解基础知识。

如果你想看一些最先进的HTML5互动动画，那么看看游戏中的免费骑士和这个令人兴奋的HTML5破坏视频。

我们来看看用于创建HTML5动画的一些工具 -

Bannersnack

当使用拖放工具集创建HTML5横幅广告时，Bannersnack是市场上最好的工具之一。我个人喜欢Bannersnack的易用性和直观的用户界面。Bannersnack在许多财富500强公司如Google，花旗银行，希尔顿，葛兰素史克和airbnb等用户中颇受欢迎。

您可以使用文字，图像，音频，按钮和剪贴画等来创建出色的横幅艺术，并将完成的文件导出为HTML5，Flash / SWF，MP4，PNG，JPEG，GIF和Flash / HTML5嵌入。

使用Bannersnack创建的广告几乎与所有主要广告网络（包括Facebook广告和Google AdWords）兼容。购买之前，您可以免费试用Bannersnack。

阅读更多关于Bannersnack的信息，请点击：Banner Snack：HTML5 Animation。

HTML5制造商 - 免费订阅

HTML5 Maker是另一种流行的在线动画工具，拥有超过100K的用户，由名为OnlyMega LLC的公司。它最常用于创建html5动画，滑块，演示文稿和幻灯片等。虽然HTML5制造商提供商业订阅，但它有一个免费的计划，可用于创建动画和横幅等免费。

HTML5 Maker附带了大量可以使用的模板。人们可以选择最适合要求的模板，修改图像，徽标，文本等，并将工作保存在云端。可以将动画嵌入网站，博客或直接从云端分享到社交媒体网络上。

使用HTML5创建的动画在Mac，PC，iPad，iPhone，Android和许多其他平台上的工作同样辉煌。我喜欢HTML5 Maker的事实是，它不依赖于任何第三方库和工具，甚至不依赖于Photoshop的图形。您可以使用编辑器（包括图像）创建您需要的所有内容。您可以根据需要导入您自己的媒体文件。

了解更多关于HTML5的设备在这里- HTML5制作

Mugeda

Mugeda平台是由Mugeda Inc.创立和销售的在线HTML5创作工具，该公司是一家位于旧金山的公司，在中国设有研发办事处。

Mugeda平台提供完整的解决方案来构建HTML5丰富的媒体，适用于所有屏幕，包括PC，平板电脑，智能手机和智能电视。它包括Mugeda工作室拖放编辑，工具，创建移动优化的MRAID 2.0投诉富媒体广告，内置流量分析和JavaScript API为开发人员。

Mugeda大量用于创建HTML5媒体广告，包括横幅广告，可展开广告，迷你游戏和插页式广告。教师还可以为学生创建交互式内容。Mugeda被Red Bull，Mazda，Sunning，Buick，ANA等公司所使用。

GSAP

GSAP是一个商业产品的企业，从GreenSock的房子和在世界动画的名义。GreenSock在过去14年处于市场，客户包括微软，Adobe，三星，可口可乐，福特等众多客户。

随着基于HTML5的运动图形的兴起，他们推出了用于HTML5的GSAP，这是一个非常强大的工具，并具有创造惊人动画的功能。GSAP的核心工具很少包括TweenLite，TweenMax，TimeLineLite和TimeLineMax。

Animatron

Animatron是HTML5动画和解说器视频的大爸爸，让观众受益。您可以通过查看其客户群，包括Google，Facebook，Amazon，Disney，Oracle，Fox，NASA和戴尔等巨头，来衡量Animatron的受欢迎程度。

在Animatron看到Animatron

Tumult炒作

Tumult Hype用于制作互动和专业的动画，适用于网络，台式机，笔记本电脑，智能手机和IPad，不需要任何编码技巧。

Tumult Hype在基于关键帧的系统上工作，您可以在其中单击记录，Tumult开始在编辑器中创建移动框架; 可以手动添加和删除帧，从头开始，最后还是在中间。

Tumult大量用于创建交互式电子贺卡，信息图形，电子书/ ibook，演示文稿等，所有这些都使用HTML5动画与CSS属性和JavaScript在后台的魔力。

Google Web Designer

如果你像我一样喜欢直接从Google家的产品，那么这个就是你的html5动画工具。Google网页设计师在撰写本文时仍然处于测试阶段，但根据我最近几周的经验，它的工作绝对正常。

Google网页设计师被许多用于创建简单的广告，包括眼睛流畅的静态和运动图形。您可以免费下载Google网页设计器，并在Windows，Mac或Linux上安装。

CreateJS

CreateJS是一个不同的动物，并提供用于创建基于HTML5的丰富互动内容的图书馆和工具的集合。它提供的图书馆包括 -

•EASELJS - 控制和管理HTML5画布元素

•TWEEENJS - 使用HTML5和JavaScript对Tween进行动画处理

•SOUNDJS - 让网络听到他们想要的内容

•PRELOADJS - 控制如何加载各种同意

CreateJs库大量用于创建基于HTML5的广告。Adobe动画和CreateJS作为一个杀手组合，被广告业界的设计师广泛使用。

随着Mozilla，Microsoft和Adobe等的支持，CreateJs似乎非常有希望，我们希望在将来的版本中看到更多的功能。

Hippani

Hippani是一家英国公司，Hippani动画师可以在30天免费试用评估文章，您可以自行购买专业计划。Hippani在人气方面并没有落后于Animatron，BannerSnack，HTML5制造商或Mugeda的联盟，而是近期不断升级的有前途的工具。

除了大多数其他工具的基本功能，Hippani还提供了一个用于创建复杂交互和游戏的javaScript引擎。

边缘动画CC

来自Adobe的房子，Edge Animate CC也一直被广泛用于创建HTML5，但是自从过去几年来，它还没有得到升级，该产品尽管很受欢迎，可能会在另一个时间被停用。

用于制作HTML5运动图形的另外三个好的工具包括RadiApp，Nodefire和Blysk。所有这些都是免费创建交互式运动图形的工具，可以随时尝试。

创建图形和动画的另一个很好的选择是SVG。由元素<svg>表示，它用作SVG（可伸缩矢量图形）的容器。SVG有许多方法来绘制圆形文字，图形图像，线条等。

Canvas可用于创建更复杂的动画，交互式图形和在浏览器中运行的游戏。如果您有兴趣了解SVG与Canvas的微妙差异。

HTML5动画 - 简史

1991年，Tim Berners-Lee发明了第一个被称为版本1的HTML。相对原始但可能有帮助的语言，HTML的第一个版本在连续8年得到改进。多年来，1995年版本2，1997年第3版，1999年第4版。作为一种创新和创新的语言，2005年以来，HTML4中的一些限制很快就会变得明确。需要一个新的改进，HTML5的来临在2012年实现。

有趣的是，HTML5支持移动网络设备，它已经得到了很多人的欢迎，现在大多数浏览器都支持这种功能。即将推出的HTML5，史蒂夫的工作拒绝在苹果设备中使用Flash，包括iPhone，iPad，iPod，并表示它不适合移动设备的性能和许多其他原因，而HTML5并未构建HTML4未被构建来创建更多的互动网站被视为已经过时和不充分。

当时的开发人员现在一致认为，需要开源标准来构建现代网站，从而导致HTML5的出现。当然，苹果拒绝并不是唯一的理由，而是坚定的一个。

HTML5是不必要的，而且在许多方面都是大大改进了第四版，并在该语言中加入了音乐和音频标签。有一些其他的改进，以及我们稍后会谈。

如果你觉得以上内容对您有用，请关注“Web堆儿”，我们的宗旨就是提供网站建设和运营中的各种干货。

原文地址：http://www.gonet.com.cn/webduirshow-116.html

TML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。 -- Palak Shah

本文导航

• -新标签和元素 …… 08%

• -HTML5 的高级功能 …… 16%

• -地理位置 …… 16%

• -网络存储 …… 33%

• -应用缓存（AppCache） …… 44%

• -视频 …… 50%

• -音频 …… 61%

• -画布（Canvas） …… 71%

• -HTML5 工具 …… 78%

编译自： http://opensourceforu.com/2017/06/introduction-to-html5/

作者： Palak Shah

译者： geekpi

HTML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。

HTML5 通过 W3C 和Web 超文本应用技术工作组Web Hypertext Application Technology Working Group之间的合作发展起来。它是一个更高版本的 HTML，它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的 Web 体验而开发的。HTML5 提供了很多的功能，使 Web 更加动态和交互。

HTML5 的新功能是：

• 新标签，如 <header> 和 <section>

• 用于 2D 绘图的 <canvas> 元素

• 本地存储

• 新的表单控件，如日历、日期和时间

• 新媒体功能

• 地理位置

HTML5 还不是正式标准（LCTT 译注：HTML5 已于 2014 年成为“推荐标准”），因此，并不是所有的浏览器都支持它或其中一些功能。开发 HTML5 背后最重要的原因之一是防止用户下载并安装像 Silverlight 和 Flash 这样的多个插件。

新标签和元素

• 语义化元素： 图 1 展示了一些有用的语义化元素。

• 表单元素： HTML5 中的表单元素如图 2 所示。

• 图形元素： HTML5 中的图形元素如图 3 所示。

• 媒体元素： HTML5 中的新媒体元素如图 4 所示。

图 1：语义化元素

图 2：表单元素

图 3：图形元素

图 4：媒体元素

HTML5 的高级功能

地理位置

这是一个 HTML5 API，用于获取网站用户的地理位置，用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

• 公共交通网站

• 出租车及其他运输网站

• 电子商务网站计算运费

• 旅行社网站

• 房地产网站

• 在附近播放的电影的电影院网站

• 在线游戏

• 网站首页提供本地标题和天气

• 工作职位可以自动计算通勤时间

工作原理： 地理位置通过扫描位置信息的常见源进行工作，其中包括以下：

• 全球定位系统（GPS）是最准确的

• 网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址

• GSM/CDMA 蜂窝 ID

• 用户输入

该 API 提供了非常方便的函数来检测浏览器中的地理位置支持：

if (navigator.geolocation) {

// do stuff

}

getCurrentPosition API 是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。

语法是：

getCurrentPosition(showLocation, ErrorHandler, options);

• showLocation：定义了检索位置信息的回调方法。

• ErrorHandler（可选）：定义了在处理异步调用时发生错误时调用的回调方法。

• options （可选）： 定义了一组用于检索位置信息的选项。

我们可以通过两种方式向用户提供位置信息：测地和民用。

1. 描述位置的测地方式直接指向纬度和经度。

2. 位置信息的民用表示法是人类可读的且容易理解。

如下表 1 所示，每个属性/参数都具有测地和民用表示。

图 5 包含了一个位置对象返回的属性集。

图5：位置对象属性

网络存储

在 HTML 中，为了在本机存储用户数据，我们需要使用 JavaScript cookie。为了避免这种情况，HTML5 已经引入了 Web 存储，网站利用它在本机上存储用户数据。

与 Cookie 相比，Web 存储的优点是：

• 更安全

• 更快

• 存储更多的数据

• 存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。

有两种类型的 Web 存储对象：

1. 本地 - 存储没有到期日期的数据。

2. 会话 - 仅存储一个会话的数据。

如何工作： localStorage 和 sessionStorage 对象创建一个 key=value 对。比如： key="Name"， value="Palak"。

这些存储为字符串，但如果需要，可以使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换。

下面给出了使用 Web 存储对象的语法：

• 存储一个值：

• localStorage.setItem("key1", "value1");

• localStorage["key1"] = "value1";

• 得到一个值：

• alert(localStorage.getItem("key1"));

• alert(localStorage["key1"]);

• 删除一个值： -removeItem("key1");

• 删除所有值：

• localStorage.clear();

应用缓存（AppCache）

使用 HTML5 AppCache，我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作。除 IE 之外，所有浏览器都可以使用 AppCache（截止至此时）。

应用缓存的优点是：

• 网页浏览可以脱机

• 页面加载速度更快

• 服务器负载更小

cache manifest 是一个简单的文本文件，其中列出了浏览器应缓存的资源以进行脱机访问。 manifest 属性可以包含在文档的 HTML 标签中，如下所示：

<html manifest="test.appcache">

...

</html>

它应该在你要缓存的所有页面上。

缓存的应用程序页面将一直保留，除非：

1. 用户清除它们

2. manifest 被修改

3. 缓存更新

视频

在 HTML5 发布之前，没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。

目前，video 元素支持三种视频格式，如表 2 所示。

下面的例子展示了 video 元素的使用：

<! DOCTYPE HTML>

<html>

<body>

<video src=" vdeo.ogg" width="320" height="240" controls="controls">

This browser does not support the video element.

</video>

</body>

</html>

例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作，我们必须添加一个 MPEG4 和 WebM 文件。

video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式，如下所示：

<video width="320" height="240" controls="controls">

<source src="vdeo.ogg" type="video/ogg" />

<source src=" vdeo.mp4" type="video/mp4" />

<source src=" vdeo.webm" type="video/webm" />

This browser does not support the video element.

</video>

图6：Canvas 的输出

音频

对于音频，情况类似于视频。在 HTML5 发布之前，在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。

目前，HTML5 audio 元素支持三种音频格式，如表 3 所示。

audio 元素的使用如下所示：

<! DOCTYPE HTML>

<html>

<body>

<audio src=" song.ogg" controls="controls">

This browser does not support the audio element.

</video>

</body>

</html>

此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作，我们必须添加一个 MP3 和 Wav 文件。

audio 元素允许多个 source 元素，它可以链接到不同的音频文件。浏览器将使用第一个识别的格式，如下所示：

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

This browser does not support the audio element.

</audio>

画布（Canvas）

要在网页上创建图形，HTML5 使用 画布 API。我们可以用它绘制任何东西，并且它使用 JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布，我们可以绘制形状和线条、弧线和文本、渐变和图案。此外，画布可以让我们操作图像中甚至视频中的像素。你可以将 canvas 元素添加到 HTML 页面，如下所示：

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

画布元素不具有绘制元素的功能。我们可以通过使用 JavaScript 来实现绘制。所有绘画应在 JavaScript 中。

<script type="text/javascript">

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

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

cxt.fillStyle="blue";

cxt.storkeStyle = "red";

cxt.fillRect(10,10,100,100);

cxt.storkeRect(10,10,100,100);

</script>

以上脚本的输出如图 6 所示。

你可以绘制许多对象，如弧、圆、线/垂直梯度等。

HTML5 工具

为了有效操作，所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具，当需要设置工作流/网站或执行重复任务时，这些工具非常有帮助。它们提高了网页设计的可用性。

以下是一些帮助创建很棒的网站的必要工具。

• HTML5 Maker： 用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5 动画等。

• Liveweave： 用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用，并为一些代码提供自动完成功能，这使得开发和测试更快更容易。

• Font dragr： 在浏览器中预览定制的 Web 字体。它会直接载入该字体，以便你可以知道看起来是否正确。也提供了拖放界面，允许你拖动字形、Web 开放字体和矢量图形来马上测试。

• HTML5 Please： 可以让我们找到与 HTML5 相关的任何内容。如果你想知道如何使用任何一个功能，你可以在 HTML Please 中搜索。它提供了支持的浏览器和设备的有用资源的列表，语法，以及如何使用元素的一般建议等。

• Modernizr： 这是一个开源工具，用于给访问者浏览器提供最佳体验。使用此工具，你可以检测访问者的浏览器是否支持 HTML5 功能，并加载相应的脚本。

• Adobe Edge Animate： 这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画，可以跨多个设备运行。

• Video.js： 这是一款基于 JavaScript 的 HTML5 视频播放器。如果要将视频添加到你的网站，你应该使用此工具。它使视频看起来不错，并且是网站的一部分。

• The W3 Validator： W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性。要测试任何网站的标记有效性，你必须选择文档类型为 HTML5 并输入你网页的 URL。这样做之后，你的代码将被检查，并将提供所有错误和警告。

• HTML5 Reset： 此工具允许开发人员在 HTML5 中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。

Palak Shah

作者是高级软件工程师。她喜欢探索新技术，学习创新概念。她也喜欢哲学。你可以通过 palak311@gmail.com[1] 联系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

点击“了解更多”可访问文内链接

web开发中，GIF动画效果是随处可见，比如常见的loading加载、人物奔跑的gif图片等等，那么这些都是怎么实现的呢？

其实实现的原理很简单，简而言之，这些所谓的动画都是一帧一帧的图片经过一段时间的间隔做出位移而来的；譬如，我们在PS里面制作GIF动画，首先要把每一帧所需要的图片制作出来，然后再通过导出的方式把GIF图片保存下来；相信会PS的同学，都可以熟练的制作一个基本的GIF动画图片；在web开发中，要实现这样的gif图片，也有很多方法；在这给读者提供一个思路，就是利用html5 canvas实现动画效果。

利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画

<!DOCTYPE html>
<html lang="en"><head>
 <meta charset="UTF-8">
 <title>canvas帧--实现动画</title>
 <style>
 *{padding:0;margin:0;}
 canvas{display:block;background:white}
</style>
</head>
<body> 
<canvas></canvas>
<script>
 var imgPic = new Image();
 imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';
 var canvas = document.querySelector('canvas');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var ctx = canvas.getContext('2d');
 imgPic.onload = function () {
 drawImg()
 }
 var i = 0;
 var lastTime = new Date().getTime();
 var delatime;
 var timer = 0;
 function drawImg() {
 window.requestAnimationFrame(drawImg);
 var now = new Date().getTime();
 delatime = now - lastTime;
 lastTime = now;
 timer += delatime;
 if (timer > 200) {
 i++;
 if (i > 7) i = 0;
 timer = 0
 }
 console.log(delatime)
 ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);
 }
</script>
</body>
</html>

以上方法实现的前提是，需要有一张已绘制帧的图片，有了图片才可进行帧的动画；利用该方法可以控制动画的播放、暂停以及帧率