Question

我正在尝试编写一些简单的游戏，而我却不得不在画布上绘制资源。我创建了一个AssetsLoader“类”来加载图像并将它们保存为图像对象。首先，我只想绘制一些已加载的资产。但是drawImage函数没有显示任何东西....我知道我的图像是通过在consol上编写对象来加载的，这给了我输出：<img name="player" src="../assets/images/player.png">

  var canvas = document.getElementById('game');
  var context = canvas.getContext('2d');
  if(!context){
      alert('Upgrade browser');
  }else{
      startGame();
  }

  function startGame(){
      AssetsLoader.getAllAssets();
      console.log(AssetsLoader.images.player); // image is loaded
      context.drawImage(AssetsLoader.images.player, 0, 0); // doesn't work
  }

编辑：好吧我的坏，我把'../'放在图像路径的前面，因为我的项目结构如下所示：

assets
    images
       player.png
js
    script for AssetsLoader

我认为我必须在一个级别上访问图像。

Answer 1

我实际上只是在画布上修复了这个问题。固定代码是：

  var canvas = document.getElementById('game');
  var context = canvas.getContext('2d');
  var img1 = new Image();
  img1.src = "../assets/images/player.png";

  context.drawImage(img1,100,100);

你制作img1 var的原因是因为它将img元素添加到画布中。然后使用img1.src设置图像的来源。当我做drawImage（）时，首先，我插入包含图像源的img1。第二个参数是X位置，第三个参数是Y位置。

JavaScript drawImage（）不起作用

1 个答案: