画布元素和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
}

这会创建一个虚拟画布(以便不必担心在DOM中获取对一个的引用)并检查getContext元素上是否存在该属性.它还会检查是否已为IE包含​​ExplorerCanvas.它不会准确地告诉您支持API的哪些功能(超出标准的形状,路径等).

有关特征检测HTML5功能(如canvas)的文章可以在这里找到.