HTML5中的Canvas动画研究_互联网+_

摘要：结合HTML5的特点及新特性详细介绍了canvas的功能及应用，分析了HTML5 canvas与flash的区别。通过利用canvas制作圆环动画的案例，讲解了canvas动画制作，并提出了canvas动画应用的发展方向。

关键词： HTML5； flash； canvas；动画制作；发展方向

中图分类号：TP312 文献标志码：A 文章编号：1006-8228（2016）08-47-03

Abstract： Based on the characteristics and new features of HTML5， this paper introduces the functions and applications of canvas， and analyzes the difference between HTML5 canvas and flash. Through the case of making ring animation， canvas animation making is explained， and the development direction of the application of canvas animation is put forward.

Key words： HTML5； flash； canvas； animation making； development direction

0 引言

Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面中添加一个canvas元素，相当于在页面上放置一块画布，通过该元素再带的API结合JavaScript代码可以在画布上绘制图形及动画效果，并提供交互。

1 HTML5概述

随着互联网移动信息技术的不断发展，以及SaaS（Software as a Service）、云计算（Cloud Computing）和 RIA （Rich Internet Applications）等新技术的不断涌现，Web 应用越来越要求浏览器具有数据库存储功能和更强的页面表现能力，这种需求推动了HTML5 标准的产生和应用[1]。HTML5是互联网的下一代标准，将逐步取代HTML4.01和XHTML1.0标准，是Web开发的最基础的技术，也被认为是互联网的核心技术之一[2]。HTML4.01诞生于1999年，作为W3C推荐的标准，其在随后的十年中从没有过大范围的变化，但互联网技术不断变化，Web应用更是日新月异，相比较起来，HTML的升级和改造则变得相对落后，逐渐成为Web应用发展的瓶颈。HTML5草案与2004年提出，2007年被W3C采纳。HTML5被开发者看做创建流行Web应用的利器，提供了很多API，HTML5能够创建更简单的Web程序，编写更简洁的HTML代码，从而让HETML紧跟互联网时代的发展。HTML5增加了对视频和canvas 2D的支持，HTML5的诞生还让人们重新审视浏览器专用多媒体的未来，如Adobe公司的flash和微软公司的silverlight，HTML5为实现这些插件的功能提供了一种标准化的方式，通过新增一些新的元素和API，让浏览器原生的支持相关的标记语言，把用MathML和SVG编写的标记直接嵌入到HTML5网页中，从而比既要支持图形又要兼顾文本的flash和silverlight更有竞争力，减少了对浏览器插件的需要，进而降低了安全风险。

总体而言，HTML5是基于最大程度上兼容HTML4而设计的，并围绕Web标准这个目标，产生了许多新的特性和技术，HTML5具有以下新特性。

⑴ 对于DOCTYPE的声明、命名空间声明、字符集编码声明更简短。例如：命名空间声明更简短，HTML5可以直接写成。

⑵ 链接css和JavaScript文件代码更简洁。在HTML4中，要链接css和JavaScript文件时，需要指定type属性，如：。

⑶ 公司地址: 北京市西城区德外大街83号德胜国际中心B-11

客服热线：400-656-5456 客服专线：010-56265043 电子邮箱：longyuankf@126.com