不支持检测HTML5 <canvas>的最佳方法

7 回答

• 0

  当我创建canvas对象时，我通常会检查 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的一个简单例子，我个人更喜欢优雅降级 .

  回复于 2024-05-14T09:36:00+08:00
• 2

  您可以使用canisuse.js脚本来检测您的浏览器是否支持画布

  caniuse.canvas()
  

  回复于 2024-05-14T09:36:00+08:00
• 211

  这里可能有一些问题 - 一些客户端不支持 all canvas方法 .

  var hascanvas= (function(){
      var dc= document.createElement('canvas');
      if(!dc.getContext) return 0;
      var c= dc.getContext('2d');
      return typeof c.fillText== 'function'? 2: 1;
  })();
  
  alert(hascanvas)
  

  回复于 2024-05-14T09:36:00+08:00
• 103

  这是Modernizr中使用的技术，基本上每个其他库都可以执行canvas工作：

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

  由于您的问题是在支持 not 时进行检测，因此我建议您使用它：

  if (!isCanvasSupported()){ ...
  

  回复于 2024-05-14T09:36:00+08:00
• 5

  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.");
  }
  

  回复于 2024-05-14T09:36:00+08:00
• 6

  为什么不试试modernizr？它是一个提供检测功能的JS库 .

  引用：

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

  回复于 2024-05-14T09:36:00+08:00
• 13

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

  • Matt's suggestion检查是否存在 getContext ，也被Modernizr库以类似的方式使用：

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

  • 检查是否存在 HTMLCanvasElement 接口，由WebIDL和HTML规范定义 . a blog post from the IE 9 team也建议采用这种方法 .

  var canvasSupported = !!window.HTMLCanvasElement;
  

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

  • 每个已知的浏览器支持画布 - 包括IE 9 - 实现此接口;

  • 它更简洁，更明显地代码正在做什么;

  • getContext 方法是significantly slower across all browsers，因为它涉及创建HTML元素 . 当你需要尽可能多地挤压性能时（例如在Modernizr这样的库中），这并不理想 .

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

  附加说明

  可能仍然需要检查是否可以检索2D上下文 . 据报道，一些移动浏览器可以在上述两个检查中返回true，但为 .getContext('2d') 返回 null . 这就是Modernizr也检查 .getContext('2d') 的结果的原因 . 但是，WebIDL和HTML - 再次 - 为我们提供了另一个更好的选择：faster：

  var canvas2DSupported = !!window.CanvasRenderingContext2D;
  

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

  您必须使用 getContext 方法 for detecting WebGL 支持，因为即使浏览器可能支持 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
      }
  }
  

  性能比较

  在Firefox 11和Opera 11中， getContext 方法的性能降低了85-90％，在Chromium 18中降低了55％ .

  

  回复于 2024-05-14T09:36:00+08:00