你或许会问:“如果早期的浏览器不支持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特有的属性。
function supports_canvas_text(){
if(supports_canvas()){ return false; }
var dummy_canvas = document.createElement(‘canvas’);
var canvas = dummy_canvas.getContext(‘2d’);
return typeof context.fillText == ‘function’;
}
该方法从从使用上一节中介绍的supports_canvas()方法来检测浏览器是否支持Canvas开始。如果你的了浏览器不支持The Canvas API,那么它肯定不支持The Canvas Text API.
if( !supports_canvas() ){ return false; }
接下来,你创建了一个对与页面无关的<canvas>元素进而获取它的drawing context. 这个获取操作一定会成功,因为在supports_canvas()方法中就已经检测过canvas对象上存在getContext()方法。
var dummy_canvas = document.createElement(‘canvas’);
var context = dummy_canvas.getContext(‘2d’);
最后,你检测之前获取的drawing context是否具有fillText()方法,如果有,那恭喜你:当前浏览器支持The Canvas Text API。
return typeof context.fillText == ‘function’
同样的,如果你不想自己亲手去写这个检测方法的话,你可以使用Modernizr来检测你的浏览器是否支持The Canvas Text API
if(Modernizr.canvastext){
//let’s draw some text
}else{
//no native canvas text support available
}
P.S.
检测技术
当你的浏览器渲染一个web页面的时候,它会构造一个对象的集合DOM(Document Object Model)来表示页面上的HTML元素。每一个元素:<p>,<div>,<span>等都会被表示成DOM中不同的对象。
所有的DOM 对象共享一个公共属性的集合,但是有些对象会拥有更多的属性。在支持HTML5特性的浏览器中,部分特定的对象会有独一无二的属性。通过对DOM的快速了解能够告诉你你哪些HTML5的特性是被支持的。
检测了浏览器是否在支持一个特定的HTML5特性有四种基本的技术,由简入繁依次是:
1、检测全局对象(诸如window或者nagivator)是否支持题特定的属性
2、创建一个元素,然后检测该元素是否存在特定的一些属性
3、创建一个元素,然后检测这个元素上是否存在特定的方法,同时调用这个方法了检查它的返回值
4、创建一个元素,给这个元素设定HTML5特有的属性,然后检查浏览器是否保留了该属性值
转载自:HTML5中国
分享到:
相关推荐
### HTML5特性检测技术 随着HTML5的普及与应用,开发者越来越关注如何高效地判断浏览器对HTML5特性的支持情况。HTML5引入了许多新的API和技术,但并非所有的浏览器都完整支持这些新特性。为了确保网站或应用能够在...
HTML5 Canvas是Web开发中的一个重要组成部分,它允许开发者在网页上动态绘制图形,提供了一种强大的矢量图形绘制能力。这个技术尤其适用于游戏、数据可视化、图表制作等场景。以下是对HTML5 Canvas基本用法的详细...
这个“HTML5 Canvas助记手册”显然是为了帮助开发者快速理解和记忆Canvas API的关键特性,结合图形与文字,使其学习更为直观和高效。下面我们将深入探讨HTML5 Canvas的核心概念和常用方法。 一、Canvas的基本结构 ...
### HTML5: Up and Running — 详尽解析与核心知识点 #### 一、书籍概览与背景介绍 《HTML5: Up and Running》是一本由Mark Pilgrim编写的关于HTML5技术的权威书籍,该书由O'Reilly Media出版。在当前市面上关于...
其中,Canvas API 是 HTML5 中的一项重要特性,它允许在网页上动态渲染图形,从而为开发者提供了创建复杂图形和动画的能力。 #### 二、Canvas的基本概念与工作原理 Canvas 元素本身并不绘制任何图形,而是提供了一...
综上所述,《HTML5: Up and Running》这本书不仅详细介绍了HTML5的新特性,还深入探讨了HTML5标准制定的历史背景及其对未来的影响。对于想要深入了解HTML5及其对现代网络开发意义的人来说,这本书是一本非常有价值的...
Canvas还支持`fillText(text, x, y)`和`strokeText(text, x, y)`来绘制文本,`font`属性可以设定文本样式。 5.5 像素级绘图:Canvas允许对每个像素进行操作,如读取或修改像素值,这在高级图像处理和像素艺术中非常...
在网页设计中,canvas元素是HTML5引入的一个强大的特性,它允许动态、程序化地绘制2D图形。这篇博客“canvas使用外部字体”探讨了如何在canvas上使用非标准字体,即外部字体,来增强图形的视觉效果。下面将详细阐述...
### 解读 HTML5:建议、技巧和技术 #### HTML5概览 HTML5是Web开发领域的一项重大革新,它不仅提供了一系列新的元素与属性,还引入了多媒体支持、绘图能力以及离线存储等功能,旨在简化网页开发过程并提高用户体验...
HTML5特性检测 Modernizr能够检测的HTML5特性包括但不限于: - **离线存储(Offline Storage)**:如Application Cache,使网页在离线状态下也能访问。 - **语义元素**:如, , , , 等,提高网页内容结构化。 - **...
Modernizr是一个强大的JavaScript库,它可以帮助检测浏览器对HTML5和CSS3新特性的支持,并根据支持情况添加自定义的类到`<html>`元素,以便于在CSS中实现浏览器兼容性。 此外,考虑到IE11移除了"MSIE"标识并开始...
在“HTML5编写的植物大战僵尸”项目中,开发者利用HTML5的特性来构建了一个完整的、基于浏览器的游戏,这展示了JavaScript的灵活性和强大性能。 1. HTML5的核心特性: - 结构化标记:HTML5引入了新的元素,如、、...
### 解读HTML5:特性与应用 #### HTML5特性概览 HTML5是Web开发领域的一个重要里程碑,它不仅引入了一系列新的元素和属性,还增强了Web应用的功能性和交互性。以下是对HTML5主要特性的详细介绍: ##### 1. 语义化...
随着浏览器技术的发展,可能会出现新的方法来检测浏览器对HTML5特性的支持情况。 总结来说,判断浏览器是否支持Canvas是进行Canvas相关开发前的一个重要步骤。通过简单的JavaScript代码,我们就可以检测出浏览器对...