Windows8Javascript将Canvas设置为填充屏幕

Windows 8 Javascript set Canvas to fill screen

本文关键字：填充 屏幕 设置 Canvas Windows8Javascript      更新时间：2023-09-26

我正在尝试使用Windows8/WinJS创建一个HTML5画布。这是我的：

    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;

诚然，这确实有效，但无论分辨率如何，我都希望画布和屏幕一样大。我该如何做到这一点？

您只需使用带有和视口高度CSS值的视口即可完成此操作(请参阅此处的一些信息(

在这种特定的情况下，你可以做：

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

此解决方案的优点是，您不必加载第三方库，例如JQuery，使其大小达到全宽/全高。

您所说的"屏幕"是指浏览器窗口的大小吗？

如果是这样，您可以使用window.outerWidth和window.outerHeight来代替document.width和document.height。或者，如果您使用jQuery:$(window(.width((和$(window(.height((。

此外，您还希望在窗口上侦听调整大小事件，以便在调整浏览器大小时重新初始化画布。

相关文章：