,因为它们已经被CSS取代。1.1、HTML5新增元素如图
1.2、浏览器对html5支持情况
操作系统
浏览器
支持度
Windows
InternetExplorer6
不支持
如果安装了GoogleChromeFrame,支持HTML5
InternetExplorer7
不支持
同上
InternetExplorer8
不支持
同上
InternetExplorer9
支持(mp4,webm*)
*如果安装了VP8解码器
Firefox<3.5
不支持
Firefox3.5,3.6
支持(ogg)
Firefox4
支持(webm,ogg)
Chrome<3
不支持
Chrome3,4,5
支持(webm,ogg)
Chrome6
支持(mp4,webm,ogg)
Opera<10.5
不支持
Opera10.5
支持(ogg)
Opera10.6
支持(webm,ogg)
Opera11
支持(webm,ogg)
Safari3.1,4,5
支持(mp4)
Mac
Safari<3.1
不支持
Safari3.1,4,5
支持(mp4)
Firefox<3.5
不支持
Firefox3.5,3.6
支持(ogg)
Firefox4
支持(webm,ogg)
Chrome<3
不支持
Chrome3,4,5
支持(mp4,ogg)
Chrome6
支持(mp4,webm,ogg)
Linux
同上Mac
同上Mac
iOS
(iPhone,iOS3,4)
Safari
支持(mp4)
早期版本(iOS1,2)不支持HTML5视频
(iPad,iOS3.2)
Safari
支持(mp4)
Android
Android2.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增加了更多API
2.1、使用HTML5canvas进行Web绘图
Web之前有三种绘图的方式,AdobeFlash,SVG和VML。
此次HTML5元素新添加的Canvas实际上是一个像素画布(bitmapcanvas),和SVG不同,画在Canvas上的元素无法进行缩放,同时也不是DOM的一部分。
WHATWG的HTML5选择Canvas作为标准原因有二:
1、由于不用存储画出的每一个元素,所以性能更好。
2、和其他语言的二维绘图API类似,更容易实现。
Canvas在HTML页面中是一个“”标签,显示为一个矩形区域。
矩形区域的左上角为坐标原点(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节点的方式如下所示。
Fallbackcontent,incasethebrowserdoesnotsupportCanvas.
2.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