заменить CanvasRenderingContext прямоугольники, фигуры с изображениями SVG в браузерной игре Pacman

Question

Я пытаюсь заменить таблетки в этой браузерной игре изображениями svg

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

В верхней части файла JS я ввел следующее (мой подход основан нана этот ответ ):

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

            }
        }
    }

Однако svgs не загружено. Может кто-нибудь помочь мне понять, что я делаю не так?

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")

И заменил код в цикле for drawPills на:

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 в вашем запросе изображения.