элемент canvas, кажется, отключен - PullRequest
Новая
       6

элемент canvas, кажется, отключен

0 голосов
/ 03 июня 2011

Я использовал элемент canvas, чтобы показать карту с патчами, которые окрашены в соответствии со значениями, полученными из запроса MySQL и записанными в массив javascript.Он отлично работает на двух моих компьютерах, в Firefox 4, IE 9 и Safari.Но когда я делал демонстрацию в школе, с IE 8 (возможно, это было бы проблемой) и Firefox 3.6 (должно работать) холст не был виден.Я не вижу, как это можно отключить!Что сделали айтишники в школе, и как я могу проверить это и вместо этого нарисовать обычную карту изображений?

1 Ответ

1 голос
/ 03 июня 2011

IE8 не поддерживает canvas.Вы можете использовать excanvas , чтобы эмулировать его.

Во-вторых, IIRC, браузеры не обязаны устанавливать ширину и высоту холста в любое значение.Вы можете попытаться установить атрибуты width и height.

UPD: будет хорошо, если вы предоставите фрагмент своей страницы.Прежде чем сделать это, расскажем несколько идей о том, как сузить проблему.

  • Убедитесь, что для типа страницы задано <!doctype html>.

  • Убедитесь, чточто никакие сообщения о том, что canvas не поддерживается (т. е. текст, помещенный между <canvas> и </canvas>), не отображаются (это не должно происходить с Firefox 3.6, но тем не менее).

  • Установите style='border:solid;' для элемента canvas.Проверьте, нарисована ли граница в ожидаемой позиции.

  • Включите canvas в элемент div и убедитесь, что он отображается в ожидаемой позиции (например, установив для него также style='border:solid;').

Если отображается рамка для холста и / или элемента обтекания, но нет рисунка, значит, есть некоторая ошибка с кодом рисунка.Если это не так, то есть проблема с позиционированием элемента (например, CSS стал диким) или загрузкой документа как такового.

UPD: Я запустил сайт с включенным Firebug, и при вызове drawImage было показано исключение.

img.src = 'images/snap9.jpg';
ctx.drawImage(img,0,0);  // HERE!

Но только для первой загрузки страницы в сеансе браузера.

Причина в том (я полагаю), что когда вы устанавливаете src в адрес изображения, оно не загружаетсянемедленно, и рисовать это невозможно до тех пор.Таким образом, исключение выбрасывается, а остальная часть кодирования не выполняется.

Вы должны установить обработчик onload для изображений (см. здесь ) и выполнить оставшуюся часть рисования в этом обработчике.

Дайте мне знать, если это поможет.

...