web-dev-qa-db-ja.com

HTML5 Canvas 100％Widthビューポートの高さ？

ビューポートの幅と高さの100％を占めるキャンバス要素を作成しようとしています。

私の例では here が発生していますが、ChromeとFireFoxの両方にスクロールバーが追加されています。余分なスクロールバーを防止し、ウィンドウの幅と高さをキャンバスのサイズに正確に合わせるにはどうすればよいですか？

jqueryhtml5canvasviewport
133
aherrick

キャンバスを常にフルスクリーンの幅と高さにするには、つまりブラウザーのサイズを変更した場合でも、キャンバスをwindow.innerHeightとwindow.innerWidthにサイズ変更する関数内で描画ループを実行する必要があります。

例： http://jsfiddle.net/jaredwilli/qFuDr/

HTML

<canvas id="canvas"></canvas>

JavaScript

(function() {
    var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            /**
             * Your drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
            // do your drawing stuff here
    }
})();

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

これが、キャンバスをブラウザの幅と高さ全体に適切に作成する方法です。 drawStuff（）関数でキャンバスに描画するためのすべてのコードを配置するだけです。

239
jaredwilli

viewport units （CSS3）を試すことができます：

canvas { 
  height: 100vh; 
  width: 100vw; 
  display: block;
}
28
Vitalii Fedorenko

ウィンドウのサイズ変更時にキャンバスのサイズを動的に調整する方法のより一般的な質問に答えます。受け入れられた答えは、幅と高さの両方が100％であると想定される場合に適切に処理されます。これは、要求されたものですが、キャンバスのアスペクト比も変更します。多くのユーザーは、ウィンドウのサイズ変更時にキャンバスのサイズを変更することを望みますが、アスペクト比はそのままにします。それは正確な質問ではありませんが、それは「適合する」だけで、質問を少し一般的なコンテキストに入れます。

ウィンドウにはアスペクト比（幅/高さ）があり、キャンバスオブジェクトにもあります。これら2つのアスペクト比をどのように相互に関連付けたいかは、明確にする必要があることの1つです。その質問に対する「1つのサイズに合う」答えはありません。欲しいです。

最も重要なことは、HTMLキャンバスオブジェクトには幅属性と高さ属性があることです。そして、同じオブジェクトのCSSにも幅と高さの属性があります。これらの2つの幅と高さは異なりますが、どちらもさまざまな用途に役立ちます。

幅と高さの属性を変更すると、キャンバスのサイズをいつでも変更できますが、すべてを再描画する必要がありますが、ある程度のサイズ変更を行うことができるため、時間がかかり、必ずしも必要ではありませんcss属性を使用します。この場合、キャンバスを再描画しません。

私はあなたがウィンドウのサイズ変更で何をしたいのか4つのケースを見ています（すべてフルスクリーンのキャンバスから始まります）

1：幅を100％のままにし、アスペクト比をそのままにしたい。その場合、キャンバスを再描画する必要はありません。ウィンドウのサイズ変更ハンドラーも必要ありません。あなたが必要なのは

$(ctx.canvas).css("width", "100%");

ここで、ctxはキャンバスコンテキストです。フィドル： resizeByWidth

2：幅と高さの両方を100％に保ち、結果として生じるアスペクト比の変更が引き伸ばされたイメージの効果を持つようにする場合。キャンバスを再描画する必要はありませんが、ウィンドウサイズ変更ハンドラーが必要です。ハンドラーで、あなたは

$(ctx.canvas).css("height", window.innerHeight);

フィドル： messWithAspectratio

3：幅と高さの両方を100％に維持する必要がありますが、アスペクト比の変更に対する答えは、画像を引き伸ばすこととは異なります。その後、再描画する必要があり、受け入れられた答えに概説されている方法でそれを行います。

フィドル： redraw

4：ページの読み込み時に幅と高さを100％にしたいが、その後は一定のままにします（ウィンドウのサイズ変更に対する反応はありません。

フィドル： 固定

モードが設定されている63行目を除き、すべてのフィドルのコードは同じです。また、フィドルコードをコピーしてローカルマシンで実行することもできます。この場合、？mode = redrawのように、クエリ文字列引数を使用してモードを選択できます。

14
mathheadinclouds

私もこの質問に対する答えを見つけようとしていましたが、受け入れられた答えは私にとって破綻していました。どうやらwindow.innerWidthの使用は移植性がありません。一部のブラウザでは動作しますが、Firefoxが気に入らないことに気付きました。

Gregg Tavaresは、この問題に直接対処する優れたリソースをここに投稿しました。 http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html （アンチパターン＃の3および4を参照） ）。

Window.innerWidthの代わりにcanvas.clientWidthを使用するとうまく機能するようです。

Greggが推奨するレンダリングループは次のとおりです。

function resize() {
  var width = gl.canvas.clientWidth;
  var height = gl.canvas.clientHeight;
  if (gl.canvas.width != width ||
      gl.canvas.height != height) {
     gl.canvas.width = width;
     gl.canvas.height = height;
     return true;
  }
  return false;
}

var needToRender = true;  // draw at least once
function checkRender() {
   if (resize() || needToRender) {
     needToRender = false;
     drawStuff();
   }
   requestAnimationFrame(checkRender);
}
checkRender();
8
David

http://jsfiddle.net/mqFdk/10/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

cSSを使用

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }
7
太極者無極而生

（動靜能量の答えを拡大）

体に合うようにキャンバスをスタイルします。キャンバスにレンダリングするときは、そのサイズを考慮してください。

http://jsfiddle.net/mqFdk/356/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

CSS：

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

Javascript：

function redraw() {
    var cc = c.getContext("2d");
    c.width = c.clientWidth;
    c.height = c.clientHeight;
    cc.scale(c.width, c.height);

    // Draw a circle filling the canvas.
    cc.beginPath();
    cc.arc(0.5, 0.5, .5, 0, 2*Math.PI);
    cc.fill();
}

// update on any window size change.
window.addEventListener("resize", redraw);

// first draw
redraw();
2
Vincent Scheib