这是 Modernizr 中使用的技术，基本上所有其他可以使用画布工作的库：

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

由于您的问题是检测时，它不支持，我建议使用它像这样：

if (!isCanvasSupported()){ ...

在浏览器中检测画布支持有两种流行的方法：

1. 马特关于检查 存在的建议getContext，也被 Modernizr 库以类似的方式使用：

   var canvasSupported = !!document.createElement("canvas").getContext;
   

2. 检查HTMLCanvasElement接口是否存在，如WebIDL和HTML规范所定义。IE 9 团队的一篇博客文章也推荐了这种方法。

   var canvasSupported = !!window.HTMLCanvasElement;
   

我的建议是后者的变体（请参阅附加说明），原因如下：

• 每个已知的支持画布的浏览器——包括 IE 9——都实现了这个接口；
• 代码在做什么更简洁，一目了然；
• 该getContext方法在所有浏览器上都明显变慢，因为它涉及创建 HTML 元素。当您需要尽可能提高性能时（例如在像 Modernizr 这样的库中），这并不理想。

使用第一种方法没有明显的好处。这两种方法都可以被欺骗，但这不太可能是偶然发生的。

补充笔记

可能仍然需要检查是否可以检索 2D 上下文。据了解，一些移动浏览器可以同时为上述检查返回true，但返回null的.getContext('2d')。这就是为什么 Modernizr 还检查.getContext('2d'). 然而，WebIDL 和 HTML —— 再次 —— 为我们提供了另一个更好、更快的选择：

var canvas2DSupported = !!window.CanvasRenderingContext2D;

请注意，我们可以完全跳过检查 canvas 元素，直接检查 2D 渲染支持。该CanvasRenderingContext2D界面也是 HTML 规范的一部分。

您必须使用检测 WebGL支持的getContext方法，因为即使浏览器可能支持WebGLRenderingContext，如果浏览器由于驱动程序问题而无法与 GPU 交互并且没有软件实现，getContext()也可能返回null。在这种情况下，首先检查接口允许您跳过检查getContext：

var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}

##性能比较 该getContext方法的性能在 Firefox 11 和 Opera 11 中慢 85-90%，在 Chromium 18 中慢约 55%。

我通常getContext在创建画布对象时运行检查。

(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());

如果支持，那么您可以继续画布设置并将其添加到 DOM。这是Progressive Enhancement 的一个简单示例，我（个人）更喜欢 Graceful Degradation。

为什么不试试Modernizr呢？它是一个提供检测功能的 JS 库。

引用：

你有没有想过在你的 CSS 中使用 if 语句来获得像 border-radius 这样很酷的特性？好吧，有了 Modernizr，您就可以做到这一点！

try {
    document.createElement("canvas").getContext("2d");
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");
}