javascript - 使用canvas在Javascript中获取新图像的最佳方法

Question

我正在使用 html5 Canvas 制作游戏，但在屏幕上显示图像时遇到一些问题。

//player img
var img1 = new Image();
    img1.onload = function() {
      console.log("image loaded");
    };
    img1.src = "player.png";

该图像是一个名为“player”的 .png 文件，保存在我的桌面上。设置 src 方法时我做错了什么吗？有一个更好的方法吗？我感谢任何帮助。

Answer 1

首先，图像应该有一个相对于 html 文档的路径，如果您没有看到图像，可能是因为您没有将该相对路径放入代码中(您只使用了文件名这意味着图像与 html 文件位于同一目录中)。

此外，您还没有显示任何将图像与 Canvas 关联的代码。这是方法:

    // Get the DOM object reference for the canvas element:
    var canvas = document.getElementById("canvas");

    // Get an object reference for the canvas' contextual environment:
    var ctx = canvas.getContext('2d');

    // Instantiate an image to use as the background of the canvas:
    var img = new Image();

    // Make sure the image is loaded first otherwise nothing will draw.
    img.addEventListener("load", function () {
      // Draw the image on the canvas at position 0, 0 (top-left):
      ctx.drawImage(img, 0, 0);
    });

    // Wait until after wiring up the load event handler to set the image source
    // This example assumes that the image is located in a sub-folder of the current folder, called images.
    // Your path must be a relative reference to the location where the image is.
    img.src = "images/starfield.jpg";