如何使图像出现在 javascript 中（并在放大时滚动）

Question

我对 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。 不仅如此，我怎样才能让它放大，从左到右滚动（我可以添加“杀死”/让玩家重新启动的块/变量）？

Answer 1

在尝试绘制图像之前，您可能需要等待图像加载。

 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提供服务。