javascript - 如何在phaser中截取游戏div的屏幕截图

Question

我现在正在使用此代码，但它返回一个空白的透明图像:

$(document).ready(function(){
    $("#t").click(function() {
        html2canvas(document.querySelector("#bracelet_maker"), 
         { onrendered: function(canvas){ 
            src = canvas.toDataURL();
            window.open(src); } });
    });
});

如果我使用 game.canvas.toDataUrl(); 它会返回黑色图像。

这就是游戏在 #bracelet_maker div 中开始的方式

var game = new Phaser.Game(width,height,Phaser.AUTO,"bracelte_canvas",{
    preload:preload,
    create:create,
    update:update  });

Answer 1

使用Phaser.AUTO将允许 Phaser.WEBGL或Phaser.CANVAS根据您的浏览器支持的类型来使用。

如果您切换到Phaser.CANVAS创建 new Phaser.Game 时您应该能够访问 canvas .

例如，在 Phaser 中通过绑定(bind) S 键:

function create() {
    // ...
    var screenshotKey = game.input.keyboard.addKey(Phaser.Keyboard.S);
    screenshotKey.onDown.add(function () { window.open(game.canvas.toDataURL()); 
}

还有 preserveDrawingBuffer 这也应该允许您从 WebGL 捕获，但它需要是 set early on in the process .

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
    preload: preload, create: create, update: update
});
game.preserveDrawingBuffer = true;