测试浏览器是否支持 Canvas 画布的方法

Question

在获取 HTML 页面上 Canvas 元素的引用后，我们需要测试一下该元素是否包含 getContext()。Canvas 的 getContext 指的是由浏览器定义的用于绘画的平面。简单地说如果上下文不存在的话，Canvas 也就名存实亡了。测试浏览器是否支持 Canvas 有好几种方法。第一种方法是检查 HTML 页面中 Canvas 元素的 getContext 方法是否存在：

if (!theCanvas || !theCanvas.getContext) {
  return;
}

事实上上述代码测试了两点，其一测试了 theCanvas 是否为 false（如果 ID 不存在的话，document.getElementById() 会返回 false），其二测试了 getContext() 函数是否存在。

在上述代码中，如果测试失败，那么 return 语句执行，程序终止。

另一种方法是创建一个专门用于判断 Canvas 是否得以支持的函数，而在该函数中，实时生成一个 Canvas 元素来进行这种判断 — 这种方法很流行：

function canvasSupport() {
  return !!document.createElement('canvas').getContext;
}
function canvasApp() {
  if (!canvasSupport()) {
    return;
  }
}

我们最钟爱的方法是使用 Modernizr.js 库（在 http://www.modernizr.com 中可以找到）。Modernizr 是一个简单易用的轻量级 JavaScript 库，用于测试各种 Web 技术的兼容性，它提供了很多静态的 Boolean 方法，可以用来测试当前 Canvas 是否得到支持。

在 HTML 页面中引入 Modernizr 很简单，从 http://www.modernizr.com 上下载代码，然后在 HTML 页面中包含这个外部 JavaScript 文件即可：

<script src="modernizr-1.6.min.js"></script>

使用 Modernizr 测试 Canvas 的支持性，只需将上面的 canvasSupport 函数改动一下就可以了：

function canvasSupport() {
  return Modernizr.canvas;
}

我们认为，判断浏览器是否支持 Canvas，使用 Modernizr.js 是最好的方案。