Javascript 使用100%不会使我的画布填满窗口_Javascript_Html_Css_Canvas_Fullscreen

Javascript 使用100%不会使我的画布填满窗口

javascript html css canvas

Javascript 使用100%不会使我的画布填满窗口,javascript,html,css,canvas,fullscreen,Javascript,Html,Css,Canvas,Fullscreen,我想让我的画布填满整个窗口。将宽度和高度设置为100%根本不起作用。取而代之的是，它的速度是100px乘以100px。为什么会发生这种情况，我如何才能达到我的效果这把小提琴基本上显示了我的问题。谢谢大家! 宽度和高度是属性，不支持%它们必须是绝对值。如果您在CSS中指定100%宽度和高度，画布将不会缩放到100%，而是缩放到100%。我建议采用以下方法实现100%的宽度和高度：您需要在javascript中计算宽度，然后应用它 js: 片段： var height=window.inne

我想让我的画布填满整个窗口。将宽度和高度设置为100%根本不起作用。取而代之的是，它的速度是100px乘以100px。为什么会发生这种情况，我如何才能达到我的效果

这把小提琴基本上显示了我的问题。谢谢大家!

宽度和高度是属性，不支持

它们必须是绝对值。如果您在CSS中指定

100%

宽度和高度，画布将不会缩放到

100%

，而是缩放到100%。我建议采用以下方法实现100%的宽度和高度：

您需要在javascript中计算宽度，然后应用它

js:

片段：

var height=window.innerHeight；
变量宽度=window.innerWidth；
var canvas=document.getElementById（'myCanvas'）；
canvas.height=高度；
画布宽度=宽度；
var context=canvas.getContext（'2d'）；
context.fillStyle=“#ffffff00”；
context.fillRect（0,0，canvas.width，canvas.height）
正文{
边际：0px；
填充：0px；
背景色：#00000华氏度
}
帆布{
填充：0；
保证金：自动；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
您应该使用CSS而不是HTML标记属性来执行此操作。通过声明一个CSS类，您将能够将相同的样式应用于您可能想要全屏显示的任何其他内容。它还将DOM逻辑与样式化逻辑分离
我会这样做：
HTML:
<canvas class="fullscreen"></canvas>

canvas.fullscreen {
  width: 100vw;
  height: 100vh;
}

“vw”和“vh”单位分别表示视图宽度和视图高度的百分比。使用这些单位将确保画布填充整个视口，而不考虑其父元素的大小。
需要做的只是让画布有一个要展开的元素
HTML:
这是一个
我希望这有帮助D
这是唯一考虑到OP可能在画布上比fillRect做得更多的答案。请不要为此使用CSS，在尝试做比ctx.fillRect（0,0，canvas.width，canvas.height）更多的事情时，您将面临很多困难。

。例如，如果你想添加一些鼠标侦听器，你的坐标将被弄乱，如果你试图画一个圆，它可能会以椭圆形结束，如果你试图

drawImage（）

比例将被弄乱，在任何情况下，您的像素比例将是错误的。您的代码将画布大小设置为100x100 px，因为canvas.width和canvas.height都采用数字大小，而不是百分比大小<代码>canvas.width=window.innerWidth&

canvas.height=window.innerHeight

将根据当前窗口大小调整画布的大小。是的，我刚刚注意到它就在那里。

<canvas class="fullscreen"></canvas>

canvas.fullscreen {
  width: 100vw;
  height: 100vh;
}

<body>
    <div id="canback">
    <canvas id="myCanvas"></canvas>
    </div>
</body>

body {
margin: 0px;
padding: 0px;
background-color: #00000F
}

#canback {
height: 100%;
width: 100%;
margin: 0 auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

#myCanvas {
background:#f4f4f4;
height:100%;
width: 100%;
padding: 0;
margin: 0 auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}