javascript - Canvas 元素和 IE

Question

_{好吧，不只是 IE，任何当前不支持它的浏览器}

我想开始使用 processing.js框架。它用于使用 canvas 元素制作图像。但是我不愿意使用它，因为它没有得到广泛支持。

如果用户不支持 canvas 元素，我给他们一个替代图像的最佳方式是什么？

我需要类似...

if(!canvas){
    element.style.backgroundColor = 'red';
}

是否有标准化的方法来执行此操作？如果不是，我能做的最好的事情是什么？

Answer 1

<canvas></canvas> 之间的任何内容如果不支持 canvas 元素，将显示标签。所以你可以试试:

<canvas><img src="alt-image-for-old-browsers.png" /></canvas>

想到的合乎逻辑的事情是将要运行的 JavaScript 放在 <canvas></canvas> 之间。标签:

<canvas>
  <script>
  document.getElementById('element').style.backgroundColor = 'red';
  </script>
</canvas>

但是，唉，这是行不通的。即使是支持 Canvas API 的浏览器也会执行该脚本。

因此，以编程方式检查浏览器是否支持 canvas API 的最佳方式可能是检查 getContext所有可用的方法 <canvas></canvas>元素:

function supportsCanvasAPI() {
  var canvas = document.createElement('canvas');
  if (window.G_vmlCanvasManager) { // IE ExplorerCanvas lib included?
    G_vmlCanvasManager.initElement(canvas);
  }
  return 'getContext' in canvas
}

这会创建一个虚拟 Canvas (这样就不用担心已经在 DOM 中获取对一个 Canvas 的引用)并检查 getContext 是否存在。属性存在于元素上。它还会检查是否 ExplorerCanvas has been included for IE .它不会准确告诉您 API 的哪些功能受支持(除了一组标准的形状、路径等)。

可以找到一篇关于功能检测 HTML5 功能(如 Canvas )的文章 here .