Как справиться с недоступностью холста в JavaScript?

Question

Как справиться с недоступностью холста в JavaScript?

1

У меня есть html-страница, которая использует холст HTML 5. Я использовал приведенный ниже код для создания объекта canvas.

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

Это работает так, как ожидалось, и отображает текст "Canvas Not Supported" в браузерах, таких как IE 8. Однако есть проблема с приведенным ниже javascript, связанным с холстом.

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

Вышеупомянутый код выдает сообщение об ошибке. Объект не поддерживает это свойство или метод в браузерах, которые не поддерживают холст. Какой правильный подход для обработки этого в javascript?

Пожалуйста, не предлагайте использовать библиотеки, такие как excanvas.

Beginner 28 июль 2017, в 13:18

Источник

0

Почему бы не использовать try/catch ? Или ты хочешь полифилл?
PeterMader 28 июль 2017, в 11:18
0

@PeterMader - мне не нужен polyfill. Является ли try/catch правильное решение?
Jaganathan Nanthakumar 28 июль 2017, в 11:23

Теги:

javascript

html5

canvas

3 ответа

1

В вашем скрипте вы можете проверить определение холста:

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. "2d" против "webgl"):

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

user1693593 28 июль 2017, в 09:34

1

Это тоже работает, спасибо :)
Jaganathan Nanthakumar 28 июль 2017, в 12:05
0

@ Начинающий без проблем :)
user1693593 28 июль 2017, в 12:05

1

Я бы использовал блок 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
}

PeterMader 28 июль 2017, в 08:46

0

Это тоже работает, спасибо :)
Jaganathan Nanthakumar 28 июль 2017, в 12:02

Ещё вопросы

Почему бы не использовать try/catch ? Или ты хочешь полифилл?
@PeterMader - мне не нужен polyfill. Является ли try/catch правильное решение?

ɢʀᴜɴᴛ · Accepted Answer · 2017-07-28T10-21-00.000Z

ПОПРОБУЙТЕ:

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

Проверяю другие ответы также. Пожалуйста, подождите.