Fatal编程技术网
  • css/
  • Css 如何使画布占据100%的剩余空间？

Css 如何使画布占据100%的剩余空间？

css html canvas

Css 如何使画布占据100%的剩余空间？,css,html,canvas,Css,Html,Canvas,与此类似，100%宽度，或两者兼而有之。我希望画布具有100%宽度和100%高度： （） 标记： <div id="canvasContainer"> <canvas id="myCanvas"></canvas> </div> Javascript： html { width: 100%; height: 100%; } body { width: 100%; height: 100%; marg

与此类似，100%宽度，或两者兼而有之。我希望
画布
具有100%宽度和100%高度：

（）

标记：

<div id="canvasContainer">
    <canvas id="myCanvas"></canvas>
</div>
Javascript：

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
}
#canvasContainer {
    width: 100%;
    height: 100%;
    background-color: green;
}
#myCanvas {
    width: 100%;
    height: 100%;
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.stroke();

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(canvas.width, 0);
ctx.lineTo(0, canvas.height);
ctx.stroke();
这会导致一些不占据100%的浏览器窗口：

如果删除
画布
，则效果良好：

这样做的缺点是我没有
画布

您可以在以下位置使用0来定位绝对值：

canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
然后只需查看它位于哪个元素中，添加
position:relative
即可处理它所覆盖的块。在您的情况下，可能是：
#canvascanner
，但如果只是一次全屏，可能是
body
。

我过去也遇到过类似的问题。我的解决方案是在
html

它去掉了底部的那一点，如果你检查页面的话，这只是一点额外的，而不是身体的高度。如果有人知道那是什么，我洗耳恭听

调整画布元素的大小 如果你使用CSS拉伸画布，你会将默认大小为300x150像素的糟糕画布拉伸到整个屏幕上——想象一下，你有一张这样大小的图像，你对它做了同样的处理——看起来会很糟糕

画布内容不能使用CSS拉伸（它以这种方式充当图像）。您需要明确设置画布的像素大小

这意味着您需要获取父容器的大小，并将其设置为画布上的像素值：

首先，要去除滚动条等，请调整您的CSS：

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding:0;
    overflow:hidden;
}
现在修改此规则：

#myCanvas {
    background-color: green;
    position:fixed;
    left:0;
    top:0;
}
现在仅将标记减少到这一点（如果希望画布覆盖整个屏幕，则不需要窗口以外的容器）：

就这样

（调整窗口大小以查看）。

修改了此处的一些示例，以使我的工作正常

JSFiddle：

JS:

CSS:

HTML:
我只有：

<!-- Styles Sheets -->
<link href="Scripts/App.min.css" rel="stylesheet" />
<!-- Javascript -->
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="Scripts/app.js"></script>
你想实现什么？@Ani是一个画布，它占据了100%的空间，其中包含div。最后，我们将把一个本地CAD应用程序转换为画布。第一步：创建一个“客户端停靠”div大小的画布。也许我不确定你在问什么：我希望整个画布一次在屏幕上可见-没有需要滚动条的溢出。这似乎只是在浏览器中隐藏滚动条；当其他元素出现时，这就开始成为一个问题。好东西。谢谢你，肯。这是一种魅力。 
var canvas;

window.onload = window.onresize = function() {

    canvas = document.getElementById('myCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;   
}

$( document ).ready( function () {
    SizeBackground();
} );

function SizeBackground(){
    var canvas = $( "canvas#background" )[0];

    fitToContainer( canvas );
}

function fitToContainer( canvas ) {
    canvas.width = canvas.parentElement.clientWidth;
    canvas.height = canvas.parentElement.clientHeight;
}

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0; }

div .container {
  width: 100%;
  height: 100%; }
div#pallette {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px; }

canvas#background {
  position: fixed;
  left: 0;
  top: 0;
  background: black; }

<body>
    <div id="pallette">
        <div class="container">
            <canvas id="background"></canvas>
            <canvas id="middleground"></canvas>
            <canvas id="foreground"></canvas>
        </div>
        <div id="stats"></div>
        <div id="chat"></div>
    </div>
</body>

<!-- Styles Sheets -->
<link href="Scripts/App.min.css" rel="stylesheet" />
<!-- Javascript -->
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="Scripts/app.js"></script>