JQuery эквивалент получения контекста Canvas


155

У меня есть следующий рабочий код:

ctx = document.getElementById("canvas").getContext('2d');

Есть ли способ переписать его для использования $? Делать это не удается:

ctx = $("#canvas").getContext('2d');

Ответы:


282

Пытаться:

$("#canvas")[0].getContext('2d');

jQuery предоставляет фактический элемент DOM в числовых индексах, где вы можете выполнять обычные функции JavaScript / DOM.


13

Я также видел, что часто предпочитают использовать .get (0) для ссылки на цель jquery как элемент HTML:

var myCanvasElem = $("#canvas").get(0);

Возможно, чтобы помочь избежать любых потенциальных ссылок на нулевые объекты, так как jquery возвращает null как объект, но работа с элементом из .get (0) не может завершиться неудачей так тихо ... Вы можете легко проверить, был ли холст найден первым до .get (0). ) лайк

if( $("#canvas").length ) ctx = $("#canvas").get(0).getContext('2d');
else console.log('Error: Canvas not found with selector #canvas');

1
try{ 
   ctx = $('#canvas').get(0).getContext('2d');
}catch(e){ 
    console.log('We have encountered an error: ' + e);
}

или...

if( typeof $('#canvas') === 'undefined'){ 
    var canvas = '<canvas id="canvas"><\/canvas>';
    $('body').append(canvas);
}
setTimeout( function(){ ctx = $('#canvas').get(0).getContext('2d'); }, 500);

Использование setTimeout - это простой способ убедиться, что вы не пытаетесь вызвать элемент canvas до его полного создания и регистрации в DOM.


Этот вопрос был задан за 8 лет до того, как вы ответили. Проверьте дату, когда ее спросили, прежде чем ответить!
Rojo

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.