HTML:如何将画布标记的大小调整为窗口的大小

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

本文关键字：窗口 调整 布标记 HTML      更新时间：2023-09-26

我做了很多研究，但我在最琐碎的任务上两手空空：

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

如果你认为这很简单，那么你就试着去做。那么，如何做到这一点的例子是什么呢？我的浏览器坏了吗？它简单到100%大小，还是复杂得多？

此外，如果你的答案中有一个脚本，那么请将其保留为纯javascript，而不使用jquery，因为我确信，如果它也可以在jquery中完成，那么它可以在好的老式纯javascript中完成。

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

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

尝试使用css：

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

此外，一定要使所有的父元素100%的宽度和高度：

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

请确保将样式标记放置在<head>和</head>之间，也可以不使用画布元素本身，只需将其添加到您的头中，而不是上面的代码：

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

编辑

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

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

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect

https://jsfiddle.net/zymobh3x/

相关文章：