Javascript无法加载图像_Javascript_Html_Image_Canvas

Javascript无法加载图像

javascript html image canvas

Javascript无法加载图像,javascript,html,image,canvas,Javascript,Html,Image,Canvas,我目前对HTML5和Javascript越来越熟悉，并且正在尝试使用Javascript将图像加载并绘制到HTML5画布上。以下是HTML代码： <html> <head> <title>Adam Leung</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"&g

我目前对HTML5和Javascript越来越熟悉，并且正在尝试使用Javascript将图像加载并绘制到HTML5画布上。以下是HTML代码：

<html>
    <head>
        <title>Adam Leung</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="js/main.js"></script>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <h1>pegGame</h1>
        <canvas id="mainCanvas" onload="" onclick="test()" width="800" height="480"></canvas>
        <a><br>by: Adam Leung</a>
    </body>
</html>

下面是文件结构：

/Site Root
   -/css
      -style.css
   -/img
      -gameLogo.png
   -/js
      -main.js
-index.html

gameLogo.png只是一个300px乘300px的图像。我相信，当我加载index.html并在画布内单击时，它应该在弹出窗口中打印“300”，并在画布上绘制gameLogo.png。当我点击画布时，弹出窗口显示“0”，没有图像绘制，这是怎么回事？（编辑：我正在使用最新版本的Chrome进行测试）

非常感谢。

在图像中添加一个onload处理程序，您就可以开始了：

function test(){
    var mainCanvas = document.getElementById("mainCanvas");
    var logoImage = new Image();

    logoImage.onload = loadingDone;      // here before setting src

    logoImage.src = "img/gameLogo.png";

    function loadingDone() {             // gets called when done
        alert(logoImage.width);
        mainCanvas.getContext("2d").drawImage(logoImage, 0, 0);
    }
}

映像加载是异步的，因此需要使用回调。如果没有，代码将继续，并尝试在完成加载之前绘制图像（最终将显示为空白图像）

还可以对错误使用回调（

onerror

）。

在映像中添加一个onload处理程序，您就可以开始了：

function test(){
    var mainCanvas = document.getElementById("mainCanvas");
    var logoImage = new Image();

    logoImage.onload = loadingDone;      // here before setting src

    logoImage.src = "img/gameLogo.png";

    function loadingDone() {             // gets called when done
        alert(logoImage.width);
        mainCanvas.getContext("2d").drawImage(logoImage, 0, 0);
    }
}

映像加载是异步的，因此需要使用回调。如果没有，代码将继续，并尝试在完成加载之前绘制图像（最终将显示为空白图像）

还可以对错误使用回调（

onerror

）。

drawImage（）

方法需要图像对象。在调用

drawImage（）

之前，创建一个映像并等待它加载。使用

onload

方法

大概

  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 50);
  };
  imageObj.src = '../img/gameLogo.png';

drawImage（）

方法需要图像对象。在调用

drawImage（）

之前，创建一个映像并等待它加载。使用

onload

方法

大概

  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 50);
  };
  imageObj.src = '../img/gameLogo.png';

你看到图像宽度的警报了吗？你看到图像宽度的警报了吗？@vladkras

如果你在图像加载完成之前尝试调用drawImage（），它不会做任何事情（或者，在旧浏览器中，甚至可能引发异常）。

？@vladkras

如果你在图像加载完成之前尝试调用drawImage（），它不会做任何事情（或者，在较旧的浏览器中，甚至可能引发异常）。

？