1

我正在尝试使用 Windows 8 / 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;

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

4

2 回答 2

2

您可以使用带有和视口高度 CSS 值的视口来执行此操作（请参阅此处的一些信息）

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

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

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

于 2013-02-25T14:31:43.503 回答
0

“屏幕”是指浏览器窗口的大小吗？

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

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

于 2013-02-25T11:57:14.853 回答