HTML5 Canvas之测试浏览器是否支持Canvas的方法

源自Steve Fulton与Jeff Fulton合著的HTML5 Canvas第一章——“检测浏览器是否支持Canvas”。

在HTML页面上获取Canvas元素引用之后，我们需检测该元素是否包含“上下文”。这里的“上下文”指的是由浏览器定义的用于绘画的平面。没有上下文，Canvas元素就形同虚设。检测浏览器是否支持Canvas有多种方法。

第一种方法是通过检查HTML页面中Canvas元素的getContext方法是否存在。示例代码如下：

```javascript

if (!theCanvas || !theCanvas.getContext) {

return;

}

```

这段代码实际上测试了两点：一是检测theCanvas是否存在；二是检测getContext()函数是否可用。如果任一测试失败，程序将终止。

另一种流行的方法是创建一个专门用于判断Canvas支持性的函数，实时生成一个Canvas元素来进行检测。Mark Pilgrim在他的HTML5网站中提到了这种方案。示例代码如下：

```javascript

function canvasSupport() {

return !!document.createElement('canvas').getContext;

}

function canvasApp() {

if (!canvasSupport()) {

return;

}

}

```

我们最推崇的方法是使用Modernizr.js库。Modernizr是一个简单易用、轻量级的JavaScript库，用于测试各种Web技术的兼容性。它提供了许多静态的Boolean方法，可以方便地检测当前浏览器是否支持Canvas。

在HTML页面中引入Modernizr非常简单。只需从官方网站下载代码，然后将其包含在HTML页面的外部js文件中即可。示例代码如下：

```html

```

使用Modernizr检测Canvas的支持性，只需稍作调整即可。示例代码如下：

```javascript

function canvasSupport() {

return Modernizr.canvas;

}

```

使用Modernizr.js来判断浏览器是否支持Canvas是最优选。它不仅使代码更加简洁明了，而且提供了更全面的浏览器兼容性测试功能。让我们共同期待更多创新的Web技术，并借助Modernizr等实用工具轻松实现跨浏览器兼容。