Я пытаюсь сгенерировать карту на основе плитки, которая до сих пор прекрасно работает, но после замены всех «тестовых прямоугольников» на изображения для представления земли, путь, некоторые дома и т. д. (в этом случае это одно и то же изображение для всех), ни одно изображение не сбрасывается.Canvas.drawImage просто просто не нарисовал изображение
Что я здесь делаю неправильно? Я также получаю нулевые ошибки.
Heres код отрезала: выход
// generate a large map
Map.prototype.generate = function(){
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = this.width;
ctx.canvas.height = this.height;
var rows = ~~(this.width/<?php echo $GAME['map']['tileSize'] + $GAME['map']['tileBorder']; ?>) + 1;
var columns = ~~(this.height/<?php echo $GAME['map']['tileSize'] + $GAME['map']['tileBorder']; ?>) + 1;
ctx.save();
// Here i wanted to check if the image gets drawn right besides the player
var testImage = document.createElement('img'); // Also tried new Image();
testImage.onload = (function() {
console.log(testImage + "-test");
ctx.drawImage(testImage, 1000, 1000, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>);
}());
testImage.src = "http://192.168.0.140/img/terrain.png";
var imgs = [];
var imgIndex = 0;
<?php echo "for (var y = 0, i = ".$tilesToLoad['xStart']."; i < ".($tilesToLoad['xStart'] + $GAME['map']['chunkSize'])."; y+=".($GAME['map']['tileSize'] + $GAME['map']['tileBorder']).", i++) {"; ?>
<?php echo "for (var x = 0, j = ".$tilesToLoad['yStart']."; j < ".($tilesToLoad['yStart'] + $GAME['map']['chunkSize'])."; x+=".($GAME['map']['tileSize'] + $GAME['map']['tileBorder']).", j++) {"; ?>
imgs[imgIndex] = document.createElement('img');
imgs[imgIndex].onload = (function() {
console.log(imgs[imgIndex] + "-" + imgIndex + "-" + x + "-" + y);
ctx.drawImage(imgs[imgIndex], x, y, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>);
}());
imgs[imgIndex].src = "http://192.168.0.140/img/terrain.png";
imgIndex += 1;
}
}
ctx.restore();
// store the generate map as this image texture
this.image = new Image();
this.image.src = ctx.canvas.toDataURL("image/png");
// clear context
ctx = null;
}
console.log:
[object HTMLImageElement]-test
[object HTMLImageElement]-0-0-0
[object HTMLImageElement]-1-41-0
[object HTMLImageElement]-2-82-0
[object HTMLImageElement]-3-123-0
Одна вещь, которую вы пропустили, это две последние строки, которые преобразуют изображение в изображение с помощью 'toDataURL'. События 'img.onload' не срабатывают до тех пор, пока функция' generate' не завершится. OP все равно не получит изображение, которое ему нужно. – Blindman67
Я изменил его так, как вы его написали, и теперь я получаю эту ошибку: Uncaught TypeError: Не могу прочитать свойство drawImage из null –
Теперь я добавил '' в свой html-файл и попытался использовать уже загруженное изображение, удалив onload и изменение строки, которая помещает изображение в массив в imgs [imgIndex] = document.getElementById ("testpic"); 'и даже с этим способом нет изображения, которое нарисовано ... Просто попробовал его в Firefox и похоже, что этот способ работает в Firefox, но не в Chrome. –