logo标签列表

如何使Canvas占据剩余空间的100%？

csshtmlcanvas
8
类似于我想让一个div占满整个高度，占满整个宽度，或两者都占满。我想让一个Canvas占满整个宽度和高度:

(链接到JsFiddle供您查看)

标记：

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

CSS：

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%;
}

Javascript：

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%：

enter image description here

如果删除Canvas，它会正常工作：

enter image description here

缺点是我就没有一个Canvas了。

你想要实现什么目标？ - Ani
@Ani 一个画布，它占据其包含div的100％。最终我们将把本地CAD应用程序转换为画布。第一步：创建与“客户端停靠”div相同大小的画布。也许我不确定你在问什么：我希望整个画布一次性在屏幕上可见-没有需要滚动条的溢出。 - Ian Boyd
4个回答
9

调整画布元素的大小

如果您使用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;
}

现在只需将您的标记减少到以下内容（如果您希望画布覆盖整个屏幕，则不需要除窗口之外的其他容器）：
<canvas id="myCanvas"></canvas>

现在我们可以计算尺寸：
var canvas;

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

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

就是这样了。

演示页面（缩小窗口查看效果）。

1
好东西。谢谢Ken。运行得很顺利。 - Boro
1
你可以在任何地方使用绝对定位，位置设置为0：
canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

然后只需查看其所在的元素，添加position: relative以处理它覆盖的块。 在您的情况下，可能是：#canvasContainer，但如果仅用于单个全屏，则可以是body。
1

我修改了这里的一些示例，以使我的工作正常。

JSFiddle链接: http://jsfiddle.net/FT3pP/1/

JS:

$( 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;
}

CSS：
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; }

HTML：

<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>
1

我曾经遇到类似的问题，我的解决方案是在 html 上设置 overflow: hidden

Fiddle Here

它可以去掉底部的那一点，如果你检查页面的话，这只是一个小小的额外部分，而不是实际的主体高度。如果有人对此有什么见解，我非常愿意倾听。

这似乎只是在浏览器中隐藏滚动条，当其他元素出现时，这就开始成为一个问题。 - Ian Boyd
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接