javascript - 如何让多个重叠的 Canvas 一起全屏显示并保持重叠？

Question

我想在单击按钮时使所有重叠的 HTML5 Canvas 全屏显示，并且我希望它们在全屏模式下保持重叠。

例如，我有 3 个重叠的 Canvas 。这个例子来自this site:

HTML

<section>
  <div id="canvasesdiv" style="position:relative;width:400px;height:300px">
    <canvas id="layer1" style="z-index: 1;position:absolute;left:0px;top:0px;" height="300px" width="400">
      This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
    <canvas id="layer2" style="z-index: 2;position:absolute;left:0px;top:0px;" height="300px" width="400">
      This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
    <canvas id="layer3" style="z-index: 3;position:absolute;left:0px;top:0px;" height="300px" width="400">
      This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
  </div>
  <div>
    <p>
      <button onclick="goFullScreen();">Go Fullscreen</button>
    </p>
  </div>
...

JavaScript

var layer1;
var layer2;
var layer3;
var ctx1;
var ctx2;
var ctx3;
var x = 400;
var y = 300;
var dx = 2;
var dy = 4;
var WIDTH = 400;
var HEIGHT = 300;
var city = new Image();

function init() {
    city.src = "http://html5.litten.com/layers/city.png";
    layer1 = document.getElementById("layer1");
    ctx1 = layer1.getContext("2d");
    layer2 = document.getElementById("layer2");
    ctx2 = layer2.getContext("2d");
    layer3 = document.getElementById("layer3");
    ctx3 = layer3.getContext("2d");
    setInterval(drawAll, 20);
}

function drawAll() {
    draw1();
    draw2();
    draw3();
}

function draw1() {
    ctx1.clearRect(0, 0, WIDTH, HEIGHT);
    ctx1.fillStyle = "#FAF7F8";
    ctx1.beginPath();
    ctx1.rect(0, 0, WIDTH, HEIGHT);
    ctx1.closePath();
    ctx1.fill();
    ctx1.fillStyle = "#444444";
    ctx1.beginPath();
    ctx1.arc(x, y, 10, 0, Math.PI * 2, true);
    ctx1.closePath();
    ctx1.fill();

    if (x + dx > WIDTH || x + dx < 0)
        dx = -dx;
    if (y + dy > HEIGHT || y + dy < 0)
        dy = -dy;

    x += dx;
    y += dy;
}

function draw2() {
    ctx2.clearRect(0, 0, WIDTH, HEIGHT);
    ctx2.drawImage(city, 0, 0);
}

function draw3() {
    ctx3.clearRect(0, 0, WIDTH, HEIGHT);
    ctx3.fillStyle = "#444444";
    ctx3.save();
    ctx3.translate(200, 200);
    ctx3.rotate(x / 20);
    ctx3.fillRect(-15, -15, 30, 30);
    ctx3.restore();
}

function goFullScreen() {
    var canvas1 = document.getElementById("layer1");
    var canvas2 = document.getElementById("layer2");
    var canvas3 = document.getElementById("layer3");
    if (canvas1.requestFullScreen){
        canvas1.requestFullScreen();
        canvas2.webkitRequestFullScreen();
        canvas3.webkitRequestFullScreen();
    }
    else if (canvas1.webkitRequestFullScreen){
        canvas1.webkitRequestFullScreen();
        canvas2.webkitRequestFullScreen();
        canvas3.webkitRequestFullScreen();
    }
    else if (canvas1.mozRequestFullScreen){
        canvas1.mozRequestFullScreen();
        canvas2.webkitRequestFullScreen();
        canvas3.webkitRequestFullScreen();
    }
}

init();

我已尝试实现 this answer 中讨论的内容。

我尝试修改 goFullScreen() 函数，您可以在上面看到。但这只会使第一个 Canvas 全屏显示。

非常感谢您的帮助。

Answer 1

您必须从父 div 请求全屏并在 CSS 中将 Canvas 元素的宽度设置为 100%:

样式:

div:-webkit-full-screen>canvas {
  width: 100% !important;
}
div:-moz-full-screen>canvas {
  width: 100% !important;
}
div:-ms-fullscreen>canvas {
  width: 100% !important;
}
div:fullscreen>canvas {
  width: 100% !important;
}

Js:

function goFullScreen() {
    var parentDiv = document.getElementById("canvasesdiv");
    if (parentDiv.requestFullscreen){
        parentDiv.requestFullscreen();}
    else if(parentDiv.webkitRequestFullscreen){
        parentDiv.webkitRequestFullscreen();
    } else if(parentDiv.mozRequestFullScreen){
        parentDiv.mozRequestFullScreen();
    }
}