javascript - Windows 8 Javascript 将 Canvas 设置为全屏

Question

我正在尝试使用 Windows 8/WinJS 创建 HTML5 Canvas 。这是我拥有的:

    var body = document.getElementById("body");
    var canvas = document.createElement("canvas");
    canvas.id = "myCanvas";

    body.appendChild(canvas);

    var canvasContext = canvas.getContext("2d");

    canvas.width = document.width;
    canvas.height = document.height;

    canvasContext.fillStyle = "#f00";

    canvasContext.fillRect(canvas.width - 100, canvas.height - 50, 100, 50);
    console.log("canvas width " + canvas.width + ",  height " + canvas.height);

其中大部分直接来自教程，但对于我看过的所有教程，宽度和高度都设置为硬编码数字，例如:

canvas.width = 800;
canvas.height = 600;

诚然，这确实有效，但我希望 Canvas 与屏幕一样大，无论分辨率如何。我如何实现这一点？

Answer 1

您可以只使用视口(viewport)和视口(viewport)高度 CSS 值来执行此操作(请参阅有关这些的一些信息 here)

在这种特定情况下，您可以这样做:

canvas.style.width = "100vw";
canvas.style.height = "100vh";

此解决方案的优点是您不必加载第 3 方库，例如JQuery 调整到全宽/全高。