Добавление ранее сохраненного getImageData холста поверх другого изображения

Question

Я пытаюсь покрыть весь холст изображением, оставляя в нем прозрачную дыру.

В основном у меня есть игра с игроком. Я хочу покрыть всю игру изображением, за исключением позиции игрока. Это прекрасно работает, когда я рассматриваю вариант заливки цветом, но я хочу сделать это с изображением. Ниже мой (ошибочный) код:

var img = new Image();

img.onload = function() {

  ctx.clearRect(0, 0, width, height);

  drawMap(); // draws my "hidden game"

  ctx.beginPath();
  ctx.fillStyle = visionRadial(game.p1.px, game.p1.py);
  ctx.rect(game.p1.px - 50, game.p1.py - 50, 100, 100);
  ctx.fill(); // this gives me a transparent circle around the position of the player.

  // Trying to save the image around my player
  var p1 = ctx.getImageData(game.p1.px - 50, game.p1.py - 50, 100, 100);

  // Image to cover the board game
  ctx.drawImage(img, 0, 0);

  // Adding back the player position (transparent lens)
  ctx.putImageData(p1, game.p1.px - 50, game.p1.py - 50);

};

img.src = 'example.jpg';

Но это не работает. Кажется, что когда я сохраняю часть предыдущего изображения в p1, изображение больше не отображается ...

Что мне здесь не хватает?

Большое спасибо!

Answer 1

Canvas, рисованное изображение

Функции getImageData и putImageData предназначены только для манипулирования пикселями. Использование пиксельных данных для рендеринга ОЧЕНЬ медленно, поскольку пиксельные данные не отображаются графическим процессором, не выполняют прозрачность, не фильтруют, не комбинируют, не масштабируют и т. Д. c. Практически бесполезен в качестве источника рендеринга

Вместо того, чтобы сохранять изображение, поскольку данные пикселей создают второй холст, нарисуйте на нем то, что вам нужно, и используйте его в качестве изображения с полной аппаратной поддержкой и всеми другими вещами, которые вы можете делать с помощью images.

Пример

Изменение кода для использования холста для удержания наложения.

// creates a canvas, size w, h , and copies canvasToCopy onto it at x, y 
function createOverlay(canvasToCopy, x, y, w, h) {
    const overlay = document.createElement("canvas");
    overlay.width = w;
    overlay.height = h;
    const ctx = overlay.getContext("2d");
    ctx.drawImage(canvasToCopy, -x, -y);  // copies canvas to overlay
    return overlay;
}
var overlay; // to hold overlay image (a canvas)
var img = new Image();
img.src = "example.jpg";
img.onload = () => {
  ctx.clearRect(0, 0, width, height);
  drawMap(); 
  ctx.beginPath();
  ctx.fillStyle = visionRadial(game.p1.px, game.p1.py);
  ctx.rect(game.p1.px - 50, game.p1.py - 50, 100, 100);
  ctx.fill(); 

  // copy current canvas content to overlay
  overlay = createOverlay(ctx.canvas, game.p1.px - 50, game.p1.py - 50, 100, 100);

  ctx.drawImage(img, 0, 0);

  // draw overlay over canvas content
  ctx.drawImage(overlay, game.p1.px - 50, game.p1.py - 50);

  img.onload = undefined; // never leave an onload (any unused event) set once done
                          // De-reference so resources closed over can be set free

};