javascript - 在浏览器 Pacman 游戏中用 svg 图像替换 Canvas Rendering Context 矩形、形状

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

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