Question

我正在尝试用svg图片替换此浏览器游戏中的药丸

https://codepen.io/hellokatili/pen/xwKRmo

在JS文件的顶部，我输入了以下内容（我的方法基于this answer）：

var image = new Image()
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

有一个名为drawPills的函数，该函数使用CanvasRenderingContext矩形绘制药丸。据我了解，要替换为这些矩形的图像需要先加载，然后才能使用，因此我将对drawPills（）的调用替换为以下内容：

    image.onload = function() {
      map.drawPills(ctx);

    }

然后在drawPills（）函数中，将矩形替换为图像：

      ctx.drawImage(image, i, j);

这是我完整版的drawPills的样子：

  function drawPills(ctx) { 

    if (++pillSize > 30) {
        pillSize = 0;
    }

    for (i = 0; i < height; i += 1) {
        for (j = 0; j < width; j += 1) {
            if (map[i][j] === Pacman.PILL) {
              ctx.drawImage(image, i, j);
              /*                     ctx.beginPath();

                ctx.fillStyle = "#000";
                ctx.fillRect((j * blockSize), (i * blockSize), 
                             blockSize, blockSize);

                ctx.fillStyle = "#FFF";
                ctx.arc((j * blockSize) + blockSize / 2,
                        (i * blockSize) + blockSize / 2,
                        Math.abs(5 - (pillSize/3)), 
                        0, 
                        Math.PI * 2, false); 
                ctx.fill();
                ctx.closePath();*/

            }
        }
    }

但是，没有svg被加载。谁能帮我弄清楚我在做什么错？

Answer 1

虽然图像似乎不在正确的位置，但是我加载了图像。我将此添加到您的代码的顶部：

function loadImage(url){
  let image = new Image()
  image.src = url
  return image;
}
var pill_img = loadImage("http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg")

并将drawPills的for循环中的代码替换为：

ctx.drawImage(pill_img, j * blockSize, i * blockSize, blockSize, blockSize)
//While you had the pills drawn to a different spot, this position got it closer than doing ctx.drawImage(pill_img, i * blockSize, j * blockSize, blockSize, blockSize)
//You can always shift it

这会将图像绘制在错误的位置，但现在我们知道它已加载。

Answer 2

定义变量image，然后将src设置为名为img的变量。

此外，如果您尝试在https页面上加载该图像，则您的请求将被阻止，因为您无法在https页面上加载不安全的内容。尝试在图像请求中将http更改为https。

在浏览器吃豆子游戏中用svg图像替换CanvasRenderingContext矩形和形状

2 个答案: