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。所有这些文件都带有上传到我的网站的文件，以及文件：/// 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进行服务。

如何使图像显示在javascript中（并在放大的同时滚动）

1 个答案: