Блог

Я очень новичок в JavaScript. Я пытаюсь создать базовую бесконечную раннерную игру, но я застрял на одной маленькой проблеме. Мне нужно изображение для печати на моем HTML-холсте, но когда я пытаюсь, ничего не происходит. Я создаю эту игру с помощью базового JavaScript. Нет AJAX / jQuery. Вот мой код и то, что я пробовал.

 //this is my code as of right now for printing images.
function make_base () {
        base_image = new Image();
        base_image.src = 'picture.png'
    }
//draw the image to the canvas 2d context
cc.drawImage(base_image, 0, 0);
  

То, что это делает, ничего не значит. Он не показывает никаких признаков изображения. Вот еще один код, который я получил, например, от w3schools (они потрясающие :))

 //image source by html hidden element
var img = document.getElementById("picture");
cc.drawImage(img, 10, 10);
</script>
<image src="picture.png" id="picture" hidden></image>
  

Это делает то же самое, что и новый код. Абсолютно ничего не показывает. Я не уверен, почему, я пробовал с Google Chrome, Firefox и Internet Explorer. Все они с файлом, загруженным на мой сайт, и с file:///c:/users/name/desktop/js/one.html . По какой-то странной причине на холсте ничего не отображается. Я также сказал Chrome всегда использовать JavaScript. Не только это, но и как я могу увеличить его и прокручивать слева направо (я могу добавить блоки / переменные, которые «убивают» / перезапускают проигрыватель)?

Вероятно, вам нужно дождаться загрузки изображения, прежде чем пытаться его нарисовать.

 const c = document.querySelector('canvas')
const cc = c.getContext('2d');

drawImage();

function drawImage() {
  const image = new Image();
  image.onload = function() {
    cc.drawImage(image, 0, 0)
  }
  image.src = "//placecage.com/200/300"
}  

 <canvas width="500" height="500"></canvas>  

Кроме того, это <img> не <image> так. Я не проверял это, но некоторые браузеры не позволяют загружать вещи, если вы включены file:// , вам придется развернуть небольшой сервер и обслуживать с localhost него.