javascript - 在 javascript、canvas 中无需滚动即可获取整个图像

Question

考虑以下因素:

您看到的所有内容都会呈现在 HTML 5 Canvas 上。正如您所看到的，该图像正在滚动。当 Angular 色四处走动时， map 将会滚动。

考虑实际图像:

该图像是 Angular 色行走的 map 的实际图像。现在考虑以下代码:

class MapExporter {

  static exportCurrentMap() {
    var imageInformation = Bitmap.snap(SceneManager._scene)._context.canvas.toDataURL('image/png');

    var splitInformationFromImage = imageInformation.split(',');
    var atobInformation = atob(splitInformationFromImage[1]);
    var atobInformationLength = atobInformation.length;
    var uint8Array = new Uint8Array(atobInformationLength);

    for (var i = 0; i < atobInformationLength; i++) {
      uint8Array[i] = atobInformation.charCodeAt(i);
    }

    var blobData = new Blob([uint8Array], {type: 'image/png'});
    saveAs.saveAs(blobData, 'map.png');
  }
}

此代码在运行时会创建以下图像:

该代码有效，但正如您所看到的，我们仅从 Canvas 中获取当前可见图像。现在所有渲染的方式都使用 Pixi.js，所以我的问题是:

有没有办法无需滚动即可获取整个图像？

canvas api有这样的东西吗？唯一的其他方法是滚动和缝合，但我不知道该怎么做，我可以让它滚动，但我不知道何时停止，或如何缝合。

所以我希望有一些东西可以让我获取所有不可见的元素

Answer 1

jsFiddle:https://jsfiddle.net/CanvasCode/q61hb9yf/1

var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");

var Player = function (xSet, ySet) {
    this.XPos = xSet;
    this.YPos = ySet;
    this.Color = "#0F0";
}

var Background = function (xSet, ySet) {
    this.XPos = xSet;
    this.YPos = ySet;
    this.Sprite = new Image();
    this.Sprite.src = "/image/hcFJb.png";
}

var player = new Player(343, 343);
var background = new Background(0, 0);

function moveSomething(e) {
    switch (e.keyCode) {
        case 37:
            if (background.XPos < 0) {
            background.XPos += 48;
            }
            else{
                player.XPos -= 48;
            }
            break;
        case 38:
            if (background.YPos < 0) {
                background.YPos += 48;
            } else {
                player.YPos -= 48;
            }
            break;
        case 39:
            if (Math.abs(background.XPos) < (c.width / 2)) {
                background.XPos -= 48;
            } else {
                player.XPos += 48;
            }
            break;
        case 40:
            if (Math.abs(background.YPos) < (c.height / 2)) {
                background.YPos -= 48;
            } else {
                player.YPos += 48;
            }
            break;
    }
}

window.addEventListener("keydown", moveSomething, false);



setInterval(function () {
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(background.Sprite, background.XPos, background.YPos);
    ctx.fillStyle = player.Color;
    ctx.fillRect(player.XPos, player.YPos, 48, 48);
}, 3)

这会将整个图像绘制到 Canvas 上，并允许用户使用箭头键四处移动，没有碰撞检测。