Canvas getContext ( "2d" ) возвращает null
Я пробовал это несколько разных способов, но я продолжаю застревать с той же ошибкой. Я загрузил изображение в холст раньше, но, так как я обновил Safari несколько дней назад, я получаю ошибки.
Я опубликую то, что у меня есть на данный момент, но я попытался сделать это с помощью свойства jQuery, html onLoad и т.д.
var cvs, ctx, img;
function init() {
cvs = document.getElementById("profilecanvas");
ctx = cvs.getContext("2d"); /* Error in getContext("2d") */
img = document.getElementById("profileImg");
drawImg();
}
function drawImg() {
ctx.drawImage(img, 0, 0);
}
window.onload = init();
Идентификаторы верны и соответствуют соответствующим тэгам canvas и img. Тем не менее, я продолжаю получать TypeError: 'null' is not an object (evaluating 'cvs.getContext')
, и, похоже, он больше не идет. Я уверен, что это некоторая ошибка ID10T, но я надеюсь, что кто-то может дать мне ключ к тому, что вызывает это? Спасибо.
Изменить:
Итак, теперь это работает, используя <body onload="init()">
. Тем не менее, он отображается только иногда, и если я пытаюсь запустить init()
off $(document).ready()
или document.onload
, мне все равно не повезло и получите ошибку. Любые мысли?
Ответы
Ответ 1
Когда вы это сделаете:
window.onload = init();
функция init()
будет выполнена немедленно (что вызывает ошибку, потому что getContext()
вызывается слишком рано, т.е. перед загрузкой DOM), а возвращаемое значение init()
будет сохранено в window.onload
.
Итак, вы действительно хотите это сделать:
window.onload = init;
Обратите внимание на отсутствующий ()
.
Ответ 2
Для других пользователей, попавших на эту страницу при поиске getContext
, возвращающих значение null, это может произойти, если вы уже запросили другой тип контекста.
Например:
var canvas = ...;
var ctx2d = canvas.getContext('2d');
var ctx3d = canvas.getContext('webgl'); // will always be null
То же самое верно, если вы измените порядок вызовов.
Ответ 3
Просто поместите свой JavaScript в конце страницы, чтобы он... покончил с вашими проблемами... Я пробовал все, но это самое логичное и простое решение.. поскольку JS будет работать только после другой части (т.е. верхняя страница) загружена.. надеюсь, что эта помощь
Ответ 4
Это не имеет никакого отношения к актуальному вопросу, но поскольку этот вопрос является первым результатом при поиске в googling getContex("2d") null
Я добавляю решение проблемы, которую я имел:
Убедитесь, что вы используете getContext("2d")
, а не getContext("2d")
- обратите внимание на нижний регистр d.