Question

我是一个使用HTML 5画布的html页面。我使用下面的代码创建了canvas对象。

<canvas id="testCanvas" width="200" height="200">
    Canvas Not Supported
</canvas>

这可以按预期工作，并在IE 8等浏览器中显示文本＆＃34; Canvas Not Supported＆＃34; 。但是，以下与画布关联的javascript存在问题。< / p>

<script>
    var testCanvas = document.getElementById("testCanvas");
    var testCanvasContext = testCanvas.getContext("2d");
</script>

以上代码在不支持画布的浏览器中抛出错误消息对象不支持此属性或方法。在javascript中处理此问题的正确方法是什么？

请不要建议使用excanvas等库。

Answer 1

尝试以下内容：

<script>
   var testCanvas = document.getElementById("testCanvas");
   var testCanvasContext = window.CanvasRenderingContext2D && testCanvas.getContext("2d");
   if (testCanvasContext) {
      // do stuff
   }
</script>

Answer 2

我会使用try/catch块：

function getContext(canvas){
  try {
    // return the context or null
    return (canvas.getContext && canvas.getContext('2d')) || null;
  } catch (e) {
    // an error occured; return null
    return null;
  }
}

var testCanvas = document.getElementById("testCanvas");
var testCanvasContext = getContext(testCanvas);
if (testCanvasContext) {
  // supported
} else {
  // not supported
}

Answer 3

在您的脚本中，您可以测试canvas的定义：

if (typeof HTMLCanvasElement !== "undefined") {
  // get canvas and context here
}
else {
  // sorry, canvas not supported in this browser
}

另一种方法是使用：

if ("HTMLCanvasElement" in window) {
  // get canvas and context here
}
else {
  // sorry, canvas not supported in this browser
}

此外，当获得canvas元素时，您应该检查getContext的返回值。这是因为一次只能提供一种类型的上下文（f.ex。＆＃34; 2d＆＃34; vs＆＃34; webgl＆＃34;）：

var context = canvas.getContext("2d");
if (context) { /* all OK */ }

如何在javascript中处理画布不可用？

3 个答案: