(1) 结构清晰，标签更具有语义化，使内容和表现分离，HTML5只专注于网页的结构，而不设计其他的表现，这对于网页的设计以及表现形式有了更大的提升。

(2) 减少了插件的使用，Video和Audio标签替代了Flash等插件，可以不需要额外的插件进行播放视频。 

(3) 新增Canvas标签，当前对于web应用的要求在不断的提高，绘图操作有了新的要求以及标准，HTML5提供了Canvas标签作为绘制图形的画布[11]。

2。1。1 Canvas标签

Canvas是HTML5的独特标签，是JavaScript绘制图形显示的接口，可以进行实时的绘制图像，具有及时性和修改性。

HTML5以前，绘制图形非常困难，并没有如Canvas一样的标签来绘制图形。HTML5新增Canvas标签后，就可以进行线条图案的绘制。绘图时Canvas采用getContext(context)方法来确定绘制环境，函数中有一个context参数，参数指明了绘制图形时的类型和环境。另外还有许多其他的方法来绘制图像。

由于Canvas的可操作性以及兼容性，最终选择Canvas进行绘制图像的接口。

2。2 CSS3技术相关介绍

CSS3即层叠样式表第三种标准[12]，作为网页的样式控制语言，可以对图像的颜色、字体、大小、布局等进行调节，可以实现程序和样式的分离，提高内容的可访问性，增强了网页设计的灵活性及独立性。

CSS规范了显示的优先级，优先级较高的优先显示。

CSS3相较于CSS2增加了另一种布局方式Flexbox布局，这种布局为现代的网页设计提供了更好的解决方案。另外对于一些图形的设计也增添了相应的属性，例如圆角属性border-radius这个属性可以帮助开发者定义一个有圆角的方框，box-shadow定义了方块的阴影部分。在颜色上，增加了一个不透明度（Opacity），用0~1来表示这个元素的透明情况。动画属性，增加了transform（变形）、transition（过渡）、animation（动画），其中transform有5种可以变换的属性，rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）、 matrix（变形矩阵），这些属性能够改变元素的形状。transition过渡用于当元素的CSS属性改变时，所做出的过渡性改变，有执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay等四个属性。Animation动画属性用于指定动画的执行，在介绍这个之前，有一个与它息息相关的规则“@keyframes”（关键帧），它有自己的规则，用于制定动画的执行顺序。Animation结合@keyframe规则即可以做出好看的动画。

2。3 JavaScript技术简介

JavaScript作为Web内容制作的三大核心之一，最早用于浏览器增加动态功能。最初由Netscape公司设计出来，起始是一种基于原型的弱类型语言。也是一种基于对象的语言，不仅可以创建对象，也可以使用现有的对象。JavaScript技术包含三个部分，ECMAScript语言、文档对象模型DOM、浏览器对象模型BOM。

JavaScript基本上运行于Web客户端进行脚本语言的编辑[13]，可以完美运行在PC设备或者移动设备上的任何浏览器，功能丰富、应用广泛。

2。4 WebGL基本介绍 

WebGL（Web图形库）是一种JavaScript API，可以用于任何兼容的Web浏览器中渲染3D图形而无需插件[14]。WebGL定义的3D图像API可以通过HTML5中的Canvas元素进行编辑以及呈现。在网页中可实现复杂的场景以及模型，也可实现复杂的交互操作。WebGL利用 Canvas来实现网页呈现， 而JavaScript实现内存管理和硬件加速。