Невозможно рисовать изображение на холсте HTML5 в Phonegap

Я пытаюсь привлечь изображение к холсту Html5, которое будет использоваться с Phonegap, это код, который я использовал.

проблема в том, что ничего не происходит, я попробовал почти все, добавил image.onload, попробовал clearrect, пока ничего не нарисовано.

Я использую Phonegap 2.7, тестирование на Android 2.3.7 (GingerBread).

скрипка

var canvas = document.getElementById('map');
var ctx = canvas.getContext("2d");
var image = new Image();
image.src="img/map-04.png";
image.onload=function(){ 
 ctx.drawImage(image,0,0);
}; 
function fitToContainer(canvas){
 var div = $(mapcontext); 
 canvas.style.width=div.css("width");
 canvas.style.height=div.css("height");
 canvas.width = canvas.offsetWidth;
 canvas.height = canvas.offsetHeight; 
}

window.onload = fitToContainer(canvas);
window.onresize = fitToContainer(canvas);

Заранее спасибо.

1 ответ

Обновить

Основываясь на предоставленной скрипке:

Вы сможете решить проблему, немного изменив код:

  • Перед загрузкой изображения убедитесь, что изображение загружено
  • Когда изображение загружается, вызовите функцию рисования и присоедините обработчик onresize для окна
  • Удалите параметры функции рисования, чтобы вы могли установить его непосредственно в качестве обратного вызова, а также использовать уже распределенную переменную холста во всем мире
  • Внутри функции рисования используйте размер окна непосредственно для ширины и высоты элемента холста, не используйте CSS, так как это растянет изображение (лучше перерисовать изображение, растянутое на холст, чтобы вы могли правильно читать позиции мыши и т.д.).
  • Перерисовывать изображение каждый раз при изменении размера холста

Обновленный код выглядит так (онлайн-живая версия здесь):

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

var image = new Image();
image.onload = function() {
 window.onresize = fitToContainer;
 fitToContainer();
};
image.src = "http://i.imgur.com/oPt1Nrr.gif";

function fitToContainer() {

 var div = $('#mapcontext'),
 w = $(window).width(),
 h = $(window).height();

 canvas.width = w;
 canvas.height = h;

 ctx.drawImage(image, 0, 0, w, h);
}

Надеюсь это поможет!

Старый ответ

Использование window.onload или window.onresize неверно. Вам необходимо передать им ссылки:

window.onload = window.onresize = function() {fitToContainer(canvas)};

Вы можете по желанию получить элемент canvas в обратном вызове функции и просто вызвать функцию без параметров

window.onload = window.onresize = fitToContainer;

function fitToContainer() { ... } // use global var for canvas

Также обратите внимание, что изменение размера холста приведет к его очистке, поэтому вам нужно будет перерисовать изображение, когда это произойдет:

function fitToContainer(canvas){
 var div = $(mapcontext); 
 canvas.style.width=div.css("width");
 canvas.style.height=div.css("height");
 canvas.width = canvas.offsetWidth; // this will clear canvas
 canvas.height = canvas.offsetHeight;

 if (image && image.complete)
 ctx.drawImage(image, 0, 0); // redraw image if loaded
}

Вы также должны добавить обработчик onerror (и оптимально onabort) для изображения в случае возникновения ошибки во время процесса загрузки и декодирования. Также добавьте эти обратные вызовы перед настройкой src.

licensed under cc by-sa 3.0 with attribution.