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

Question

我已经做了很多研究，但我空手而归，这似乎是最微不足道的任务：

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

如果您认为这很简单，那么您可以尝试去做。 那么，如何做到这一点的例子是什么？ 我的浏览器坏了，它像 100% 大小一样简单，还是要复杂得多？

另外，如果您的答案中有一个脚本，那么请将它保留为没有 jquery 的纯 javascript，因为我确信如果它也可以在 jquery 中完成，那么它可以在旧的纯 javascript 中完成。

Answer 1

你需要清除体内默认为5px保证金像这样。

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

Answer 2

尝试使用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 3

编辑

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

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