HTML5入门

HTML5特性检测一:Canvas Text

字号+ 作者: 来源: 2014-11-16 20:49 我要评论( )

你或许会问:如果早期的浏览器不支持HTML5我该如何开始使用它呢?。但是这个问题本身就会让人产生误解。HTML5只是一些特性的集合,因此你不能说检测浏览器是否支持HTML5,但是你可

 你或许会问:“如果早期的浏览器不支持HTML5我该如何开始使用它呢?”。但是这个问题本身就会让人产生误解。HTML5只是一些特性的集合,因此你不能说检测浏览器“是否支持HTML5”,但是你可以检测浏览器是否支持诸如“canvas“,“video”,“geolocation”等等这些特性。

Canvas Text

即使你的浏览器支持The Canvas API,也有可能不支持The Canvas Text API,原因是The Canvas API一直在不断健壮不断的加入新的内容,the text 方法也是后来才被加入进去的,有些浏览器在完成实现The Canvas API的时候,The Text API还没有被加入进来,在这种情况下,就会发生你的浏览器支持The Canvas API而不支持The Canvas Text API。

要检测浏览器是否支持The Canvas Text API的话可以用之前提到的检测方法中的第二种方法。如果你的浏览器支持The Canvas API,那么用来检测的时候创建的<canvas>有元素会有一个getContext()方法,而相反,如果你的浏览器不支持The Canvas API的话,那么该<canvas>元素不会拥有canvas特有的属性。

JavaScript Code复制内容到剪贴板
  1. function supports_canvas_text(){  
  2. if(supports_canvas()){ return false; }  
  3. var dummy_canvas = document.createElement(‘canvas’);  
  4. var canvas = dummy_canvas.getContext(‘2d’);  
  5. return typeof context.fillText == ‘function’;  
  6. }  
该方法从从使用上一节中介绍的supports_canvas()方法来检测浏览器是否支持Canvas开始。如果你的了浏览器不支持The Canvas API,那么它肯定不支持The Canvas Text API.
 
JavaScript Code复制内容到剪贴板
  1. if( !supports_canvas() ){ return false; }  
接下来,你创建了一个对与页面无关的<canvas>元素进而获取它的drawing context. 这个获取操作一定会成功,因为在supports_canvas()方法中就已经检测过canvas对象上存在getContext()方法。
 
JavaScript Code复制内容到剪贴板
  1. var dummy_canvas  = document.createElement(‘canvas’);  
  2. var context = dummy_canvas.getContext(‘2d’);  
最后,你检测之前获取的drawing context是否具有fillText()方法,如果有,那恭喜你:当前浏览器支持The Canvas Text API。
return typeof context.fillText == ‘function’
同样的,如果你不想自己亲手去写这个检测方法的话,你可以使用Modernizr来检测你的浏览器是否支持The Canvas Text API
JavaScript Code复制内容到剪贴板
  1. if(Modernizr.canvastext){  
  2. //let’s draw some text  
  3. }else{  
  4. //no native canvas text support available  
  5. }  
P.S
检测技术 当你的浏览器渲染一个web页面的时候,它会构造一个对象的集合DOM(Document Object Model)来表示页面上的HTML元素。
每一个元素:<p>,<div>,<span>等都会被表示成DOM中不同的对象。 所有的DOM 对象共享一个公共属性的集合,但是有些对象会拥有更多的属性。
在支持HTML5特性的浏览器中,部分特定的对象会有独一无二的属性。通过对DOM的快速了解能够告诉你你哪些HTML5的特性是被支持的。
检测了浏览器是否在支持一个特定的HTML5特性有四种基本的技术,由简入繁依次是:
 
1、检测全局对象(诸如window或者nagivator)是否支持题特定的属性
2、创建一个元素,然后检测该元素是否存在特定的一些属性
3、创建一个元素,然后检测这个元素上是否存在特定的方法,同时调用这个方法了检查它的返回值
4、创建一个元素,给这个元素设定HTML5特有的属性,然后检查浏览器是否保留了该属性值

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 超级绚丽的html5的页面

    超级绚丽的html5的页面

    2014-11-16 20:49

  • HTML5基础,第4部分:点睛之笔Canvas

    HTML5基础,第4部分:点睛之笔Canvas

    2014-11-16 20:49

  • HTML5基础,第3部分:HTML5 API的威力

    HTML5基础,第3部分:HTML5 API的威力

    2014-11-16 20:49

  • HTML5基础,第2部分:组织页面的输入

    HTML5基础,第2部分:组织页面的输入

    2014-11-16 20:49

网友点评
c