8

100% の高さ、100% の幅、またはその両方を取得する方法と同様です。divCanvas幅100％、高さ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

すべての場合に 0 で絶対位置を指定できます:

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

position: relative次に、配置されている要素を確認し、カバーするブロックを処理するために追加します。あなたの場合、おそらく:ですが、それが単一のフルスクリーンの場合だけ#canvasContainerかもしれません。body

于 2013-06-21T15:16:36.523 に答える
1

過去に同様の問題がありました。それに対する私の解決策はoverflow: hidden、html

ここでフィドル

ページを調べると、実際には本体の高さではなく、ほんの少しだけ余分な下部の部分が取り除かれます。誰かがそれが何であるかについての洞察を持っているなら、私はすべての耳です.

于 2013-06-21T15:31:36.733 に答える
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 に答える