HTML：如何将 Canvas 标签调整为 Window 的大小

Question

我做了很多研究，但在看似最微不足道的任务上却一无所获：

如果我有一个 canvas 元素占据了整个屏幕并且是唯一可见的 HTML，那么我该如何将它的大小调整为 window 的大小它仍然可以编辑？？？

如果你觉得这很简单，那你就试试吧。那么，如何做到这一点的例子是什么？我的浏览器是否有问题并且它只是简单到 100% 大小，还是要复杂得多？

此外，如果您的答案中有脚本，请将其保留为简单的 javascript 而不要 jquery 因为我确定如果它也可以在 [=25= 中完成] 那么它可以在良好的旧平原上完成 javascript.

Answer 1

尝试使用 css:

<canvas style="width: 100%; height: 100%;"></canvas>

另外，确保所有父元素的宽度和高度都为 100%：

<style>
html, body {
    height: 100%;
    width: 100%;
}
</style>

请务必将样式标签放在 <head> 和 </head> 之间，您也可以不理会 canvas 元素本身，只需将其添加到您的头部而不是上面的代码：

<style>
html, body {
    height: 100%;
    width: 100%;
}

canvas {
    height: 100%;
    width: 100%; 
}
</style>

Answer 2

编辑

根据你的例子：ctx.fillRect(0, 0, canvas.height, canvas.width);

必须是： ctx.fillRect(x, y, width, height);

Answer 3

您需要像这样从正文中删除默认的 5px 边距。

<body style="margin:0px;">
    <canvas width="100%" height="100%">
Your browser doesn't support the HTML5 canvas
    </canvas>
</body>

HTML: How To Resize A Canvas Tag To the Size Of The Window