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>

想到的逻辑是将您想要在<canvas></canvas>代码之间运行的JavaScript：

<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
}

创建一个虚拟画布（以便不用担心在DOM中抓取对一个的引用）并检查元素上是否存在getContext属性。它还会检查是否ExplorerCanvas has been included for IE。它不会准确地告诉您支持API的哪些功能（超出标准形状，路径等）。

可以找到关于特征检测HTML5功能（如canvas）的文章here。

Answer 2

if (typeof HTMLCanvasElement === 'undefined') {
    // redirect to another page, or whatever you want
}

Answer 3

是的，实际上HTML的有用属性是它忽略了未知标签。以下是：

<canvas> This text is shown to IE users </canvas>

将在IE中显示后备文本。

Answer 4

您也可以考虑使用其中一个基本上在IE中创建工作画布标记的JavaScript库。这是一个：http://code.google.com/p/explorercanvas/

Answer 5

Canvas 适用于Opera，Chrome，Safari，Firefox，IE6-8（使用excanvas.js，如@philfreo所述）。

Processing.js 特别适用于IE，如Processing.js主页所述：

Processing.js在FireFox，Safari中运行 Opera，Chrome也将与之合作 Internet Explorer，使用资源管理器画布。

IE有一些技巧：你需要特别注意动态创建Canvas，你不能附加事件（直接 - 你可以附加到容器div），你不能得到画布中的像素信息，不支持径向渐变。哦，当然，IE上的速度要慢得多。

我不认为当你在Processing.js工作时，任何这些警告都会适用于你，当然除了模拟画布的excanvas.js的缓慢之外。

Answer 6

您可以查看Modernizr library以查看对您感兴趣的各种功能的支持。

画布元素和IE

6 个答案: