無需在javascript，canvas中滾動即可獲取整個圖像

Question

考慮以下：

您看到的所有內容都呈現在HTML 5畫布上。 如您所見，該圖像滾動。 隨着角色走動，地圖也會滾動。

考慮實際的圖像：

該圖像是角色行走的地圖的實際圖像。 現在考慮以下代碼：

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');
  }
}

此代碼在運行時將創建以下圖像：

該代碼有效，但是如您所見，我們僅從畫布上獲取當前可見圖像。 現在，所有呈現方式都使用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 = "http://i.stack.imgur.com/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)

這會將整個圖像繪制到畫布上，並允許用戶使用箭頭鍵來回移動，而不會發生碰撞檢測。