搜索
HTML5和Wekbit调研报告（2011年4月）武汉必联网络技术有限公司一、HTML5介绍HTML5草案的前身名为WebApplications1.0，是在2004年由WHATWG提出，再于2007年获W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。目前Firefox、GoogleChrome、Opera及Safari（版本4以上）已支持HTML5。HTML5提供了一些新的元素和属性。其中有些是技术上类似div和span标签，但有一定含义，例如nav和footer。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如audio和video标记。一些过时的HTML4标记将取消，其中包括纯粹用作显示效果的标记，如font和center，因为它们已经被CSS取代。1.1、HTML5新增元素如图1.2、浏览器对html5支持情况操作系统浏览器支持度WindowsInternetExplorer6不支持如果安装了GoogleChromeFrame，支持HTML5InternetExplorer7不支持同上InternetExplorer8不支持同上InternetExplorer9支持(mp4,webm*)*如果安装了VP8解码器Firefox3.5不支持Firefox3.5,3.6支持（ogg）Firefox4支持（webm,ogg）Chrome3不支持Chrome3,4,5支持（webm,ogg）Chrome6支持（mp4,webm,ogg）Opera10.5不支持Opera10.5支持（ogg）Opera10.6支持（webm,ogg）Opera11支持（webm,ogg）Safari3.1,4,5支持（mp4）MacSafari3.1不支持Safari3.1,4,5支持（mp4）Firefox3.5不支持Firefox3.5,3.6支持（ogg）Firefox4支持（webm,ogg）Chrome3不支持Chrome3,4,5支持（mp4,ogg）Chrome6支持（mp4,webm,ogg）Linux同上Mac同上MaciOS(iPhone,iOS3,4)Safari支持（mp4）早期版本（iOS1,2）不支持HTML5视频(iPad,iOS3.2)Safari支持（mp4）AndroidAndroid2.1,2.2支持（mp4）Android2.3支持（mp4）注释：ogg=带有Thedora视频编码和Vorbis音频编码的Ogg文件。mp4=带有H.264视频编码和AAC音频编码的MPEG4文件。1.3、浏览器市场排行美国互联网流量监测机构NetApplications今天发布了2011年2月份最新浏览器市场占有率及排行统计数据，统计结果显示，2011年2月，微软IE浏览器全球市场份额有所增长，由1月的56%上升到56.77%，相信这一增长与IE9RC版的发布不无关系，而伴随着3月份IE9正式版的发布，相信IE浏览器全球市场份额将会进一步的提高。NetApplications统计数据还显示，今年2月份谷歌Chrome浏览器全球市场份额再次上升，由1月份的10.7%增至10.93%，虽然说增幅不大，但长期以来Chrome可谓稳扎稳打，市场份额的持续增长是其他浏览器都没有的。也许是厌倦了没完没了的Beta版，有一部分用户在一月份选择放弃了Firefox浏览器，2月份市场占有率为21.74%，相较1月份的22.75%下降1.01%。不知道即将来临的Firefox4.0RC版能否帮Firefox挽回一些市场份额呢？苹果Safari相应市场份额由1月的6.30%增至6.36%，而Opera浏览器则由1月的2.28%下降到2.15%。二、HTML5技术分析除了原先的DOM接口，HTML5增加了更多API2.1、使用HTML5canvas进行Web绘图Web之前有三种绘图的方式，AdobeFlash，SVG和VML。此次HTML5元素新添加的Canvas实际上是一个像素画布（bitmapcanvas），和SVG不同，画在Canvas上的元素无法进行缩放，同时也不是DOM的一部分。WHATWG的HTML5选择Canvas作为标准原因有二：1、由于不用存储画出的每一个元素，所以性能更好。2、和其他语言的二维绘图API类似，更容易实现。Canvas在HTML页面中是一个“canvas/canvas”标签，显示为一个矩形区域。矩形区域的左上角为坐标原点(0,0)，向右为X轴，向下为Y轴。2.1.1、基本绘图API单独的一个canvas标记只是在页面中定义了一块矩形区域，并无特别之处，开发人员只有配合使用JavaScript脚本，才能够完成各种图形，线条，以及复杂的图形变换操作，与基于SVG来实现同样绘图效果来比较，canvas绘图是一种像素级别的位图绘图技术，而SVG则是一种矢量绘图技术。正鉴于这种本质机理的不同，如何更快速高效的进行canvas渲染成为各主流JavaScript执行引擎性能比拼的重要指标之一。目前，Chrome的V8,Firefox的SpiderMonkey以及Safari的Nitro等引擎都已经能够很好的满足二维绘图所需的必要性能指标，虽然在运行一些基于canvas的游戏时CPU占用率还是相对较高，但我们有理由相信随着NVIDIA和AMD等一系列硬件厂商的参与，硬件加速技术将大大提升Web应用的性能。在开始绘图之前，我们需要首先创建一个指定大小的canvas，并为其指定一个id，方便在JavaScript脚本中获取该DOM实例对象。声明一个canvas节点的方式如下所示。canvasid=canvaswidth=300height=200Fallbackcontent,incasethebrowserdoesnotsupportCanvas./canvas2.1.2、简单图形绘制基于canvas的绘图并不是直接在canvas标记所创建的绘图画面上进行各种绘图操作，而是依赖画面所提供的渲染上下文（RenderingContext），所有的绘图命令和属性都定义在渲染上下文当中。在通过canvasid获取相应的DOM对象之后首先要做的事情就是获取渲染上下文对象。渲染上下文与canvas一一对应，无论对同一canvas对象调用几次getContext()方法，都将返回同一个上下文对象。目前，所有支持canvas标签的浏览器都支持2D渲染上下文，可以使用如下的代码来获取该对象。varcontext=document.getElementById(canvas).getContext(2d);除此之外，在不久的将来，开发人员还会能够得到基于OpenGL的3D渲染上下文以在canvas中进行3D绘图。与SVG不同，canvas原生支持的基本图形只有矩形一种，至于其他的圆形，多边形等图形则都由路径来负责绘制实现。2.1.3、绘制路径在开始动手绘制路径之前，首先需要明确的是：矩形绘制API是一种即时性的API，他会在相应的绘图函数执行完毕之后，将图形即时的渲染在画面上。然而路径绘制API并非如此，完整的路径绘制过程大致可以分为如下两个阶段：1、定义路径轮廓：在每个canvas实例对象中都拥有一个path对象，创建自定义图形的过程就是不断对path对象操作的过程。每当开始一次新的图形绘制任务，都需要先使用beginPath()方法来重置path对象至初始状态，进而通过一系列对moveTo/lineTo等画线方法的调用，绘制期望的路径，其中moveTo(x,y)方法设置绘图起始坐标，而lineTo(x,y)等画线方法可以从当前起点绘制直线，圆弧以及曲线到目标位置。最后一步，也是可选的步骤，是调用closePath()方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。2、绘制路径定义完路径的轮廓，此时canvas画面中没有显示任何路径，开发人员还可以对路径进行修改。一旦确定完成，则需要继续调用stroke()/fill()函数来完成将路径渲染到画面的最后一步。路径的轮廓颜色和填充颜色由strokeStyle和fillStyle属性决定。2.1.4、二维变形Canvas绘图中另一个重要的概念是绘画状态（DrawingState），绘画状态反映了渲染上下文当前的瞬时状态，开发人员可以通过对绘画状态的保存/恢复操作而快速的回到之前使用的各种属性和变形操作。绘画状态主要由以下三个部分构成：当前的变形矩阵（transformationmatrix）当前的裁剪区域（clippingregion）当前上下文中的属性，比如strokeStyle,fillType,globalAlpha,font等等。需要指出的是，当前路径对象以及当前的位图都不包含在绘画状态之中，路径是持续性的对象，如前文所讲，只有通过beginPath()操作才会进行重置，而位图则是canvas的属性，并非属于渲染上下文的。开发人员可以使用save和restore两种方法来保存和恢复canvas状态，每调用save方法，都会将当前状态压入堆栈中，而相应的restore方法则会从堆栈中弹出一个状态，并将当前画面恢复至该状态。绘画状态在canvas图形变形操作中应用极为广泛，也非常重要，因为调用一个restore方法远比手动恢复先前状态要简单许多，因而，一个较好的习惯是在做变形操作之前先保存canvas状态。二维绘图的常用变形操作在canvas中都可到了很好的支持，包括平移（Translate），旋转（Rotate），伸缩（Scale）等等。由于所有的变形操作都基于变形矩阵，因而开发人员始终需要记住一点的就是，一旦没有使用save/restore操作保持住原来的绘图状态，那么后续的绘图操作，都会在当前所应用的变形状态下完成。2.1.5、像素级绘图像素级别的绘图操作是canvas绘图区别于SVG，VML等绘图技术的最为明显特征之一，渲染上下文提供了createImageData,getImageData,和putImageData三种方法来进行针对像素的操作，所基于的对象都是imageData对象。imageData对象包含width、height和data三个属性，其中data包含了width*height*4个像素值，之所以乘以4，在于每个像素都有RGB值和透明度alpha值。2.1.6、实现动画效果Canvas并非为了制作动画而出现，自然没有动画制作中帧的概念。因而，使用定时器不断的重绘canvas画面成为了实现动画效果的通用解决方式。Javascript中的setInterval(code，millisec)方法可以按照指定的时间间隔millisec来反复调用code所指向的函数或代码串，这样，通过将绘图函数作为第一个参数传给setInterval方法，在每次被调用的过程中移动画面中图形的位置，来最终达到一种动画的体验。需要注意的一点是，虽然setinterval方法的第二个参数允许开发人员对绘图函数的调用频率进行设定，但这始终都是一种最为理想的情况，由于这种绘图频率很大程度上取决于支持canvas的底层JavaScript引擎的渲染速度以及相应绘图函数的复杂性，因而实际运行的结果往往都是要慢于指定绘图频率的。2.2、定时媒体回放Audio和Video标签提供了在浏览器中不使用插件播放视频和音频的特性。书中提到了那场著名的HTML5视频格式大战，最后不同的浏览器还是选择了支持不同的格式。各浏览器对编码格式的支持请查看1.2浏览器对html5支持情况。检测浏览器支持：varhasVideo=!!(document.createElement(‘video’).canPlayType);回退：videosrc=”video.ogg”