Javascript 在浏览器Pacman游戏中将画布渲染上下文矩形、形状替换为svg图像

我正在尝试用svg图像替换这个浏览器游戏中的药丸

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

有一个名为

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();*/

            }
        }
    }

函数（ctx）{
如果（++pillSize>30）{
pillSize=0；
}
对于（i=0；i<高度；i+=1）{
对于（j=0；j

---

但是，没有加载SVG。有人能帮我找出我做错了什么吗？

定义变量

image

，然后将

src

设置为名为

img

的变量

---

此外，如果您尝试在

https

页面上加载该图像，您的请求将被阻止，因为您无法在

https

页面中加载不安全的内容。请尝试在图像请求中使用

https

更改

http

。

当图像似乎不在正确的位置时，我加载了图像。我添加了此项o代码顶部：

函数加载图像（url）{
让图像=新图像（）
image.src=url
返回图像；
}
var pill\u img=loadImage（“http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg")

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

ctx.drawImage（pill\u img，j*blockSize，i*blockSize，blockSize，blockSize）
//当你将药丸拉到不同的位置时，这个位置比使用ctx.drawImage（药丸，i*blockSize，j*blockSize，blockSize，blockSize）更接近
//你可以随时改变它

---

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

很难看出您仅使用了这一点，您是否可以至少包含完整的

drawPills

？还要注意，这个确切的svg没有定义大小，使用drawImage时可能会出现奇怪的行为，甚至至少在Firefox上完全失败。请参阅关于是问题。@kaido I包含了drawImage的

drawPills

函数so first，x和y（源代码，x，y）应该分别是

j*blockSize

和

i*blockSize

。@kaido谢谢，这是有意义的。尽管如此，我仍然没有看到svg被绘制出来。您的第一行定义了

image

，但在第二行中使用了

img.src

。我假设您应该从

var img=new image（）开始

。此外，图像源不安全（

http

）。至少在codepen中，图像不会加载。

  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();*/

            }
        }
    }