你或許會問：“如果早期的浏覽器不支持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復制內容到剪貼板
- 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.
JavaScript Code復制內容到剪貼板
- if( !supports_canvas() ){ return false; }
接下來，你創建了一個對與頁面無關的<canvas>元素進而獲取它的drawing context. 這個獲取操作一定會成功，因為在supports_canvas()方法中就已經檢測過canvas對象上存在getContext()方法。
JavaScript Code復制內容到剪貼板
- 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
JavaScript Code復制內容到剪貼板
- 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特有的屬性，然後檢查浏覽器是否保留了該屬性值