8

类似于我希望div采用 100% 高度、100% 宽度或两者兼而有之的方式。我想要一个Canvas100% 的宽度和 100% 的高度：

（链接到 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% 的浏览器窗口：

在此处输入图像描述

如果您删除以下内容，它可以正常工作Canvas：

在此处输入图像描述

缺点是我没有Canvas.

4

4 回答 4

8

调整画布元素的大小

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

就是这样。

工作演示（调整窗口大小以查看）。

于 2013-06-21T20:58:50.010 回答
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>
于 2014-05-30T10:15:07.863 回答
1

我过去也遇到过类似的问题。我的解决方案是设置overflow: hidden在html

在这里提琴

它去掉了底部的那一点，如果你检查页面只是一点点额外，而不是身体的高度。如果有人对那是什么有一些了解，我会全神贯注。

于 2013-06-21T15:31:36.733 回答
1

你可以用 0 来定位绝对：

canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

然后只需查看它定位在哪个元素中，添加position: relative以处理它所覆盖的块。在你的情况下可能：#canvasContainer，但body如果它只是一个全屏。

于 2013-06-21T15:16:36.523 回答