ウィンドウに合わせてHTML5キャンバスのサイズを変更する

400

HTML5 <canvas>要素をページに合わせて自動的にスケーリングするにはどうすればよいですか？

たとえば<div>、heightとwidthプロパティを100％に設定することでをスケーリングできますが、スケーリングされ<canvas>ませんか？

javascript  html  html5-canvas 
— Devyn
ソース
7
canvas {width：100％; height：100％}が機能しないのはなぜですか？
— zloctb 2014
28
@zloctb-キャンバスを直接拡大し、画像を拡大します。
— デレク━會功夫
8
関連する問題に対して何をすべきか、何をすべきでないかの詳細な説明については、WebGLの基礎を参照してください。
— legends2k
2
キャンバスも適切にスケーリングされます。css{width：100％}を追加するだけですが、その内容は変更されませんが、それはまったく別の問題です！
— イジェクタメンタ2016年

回答:

372

私はこれに対するエレガントな解決策を見つけたと思います：

JavaScript

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS

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

今のところ、パフォーマンスに大きな悪影響はありません。

— Devyn
ソース
7
おそらく次の方法でマージンを無効にする必要がありますbody, html { margin: 0px;}
— Nicklas A.
45
これは、サイズ変更イベントを聞くよりも望ましいですか？
— エリック、
25
@Elisabeth：スクロールバーを取り除くには、htmlおよびbody要素のスタイルに「overflow：hidden」を追加します。thefutureoftheweb.com/blog/100-percent-height-interfaceを
— Denis Washington
17
私はこれに加えて、キャンバスを表示：ブロックに設定しました（表示するようにデフォルト設定されているようです：インラインで余分なスペースが作成されていました！）。
— エリザベス
15
これはアンチパターンかもしれません。理由と対処法については、3番目の項目を参照してください。
— legends2k
67

次の解決策が私にとって最も効果的でした。私はコーディングに比較的慣れていないので、何かが期待どおりに機能していることを視覚的に確認したいと思っています。私はそれを次のサイトで見つけました：http : //htmlcheats.com/html/resize-the-html5-canvas-dyamically/

コードは次のとおりです。

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Resize HTML5 canvas dynamically | www.htmlcheats.com</title>
    <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      border: 0;
      overflow: hidden; /*  Disable scrollbars */
      display: block;  /* No floating content on sides */
    }
    </style>
</head>

<body>
    <canvas id='c' style='position:absolute; left:0px; top:0px;'>
    </canvas>

    <script>
    (function() {
        var
        // Obtain a reference to the canvas element using its id.
        htmlCanvas = document.getElementById('c'),
        // Obtain a graphics context on the canvas element for drawing.
        context = htmlCanvas.getContext('2d');

       // Start listening to resize events and draw canvas.
       initialize();

       function initialize() {
           // Register an event listener to call the resizeCanvas() function 
           // each time the window is resized.
           window.addEventListener('resize', resizeCanvas, false);
           // Draw canvas border for the first time.
           resizeCanvas();
        }

        // Display custom canvas. In this case it's a blue, 5 pixel 
        // border that resizes along with the browser window.
        function redraw() {
           context.strokeStyle = 'blue';
           context.lineWidth = '5';
           context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
        }

        // Runs each time the DOM window resize event fires.
        // Resets the canvas dimensions to match window,
        // then draws the new borders accordingly.
        function resizeCanvas() {
            htmlCanvas.width = window.innerWidth;
            htmlCanvas.height = window.innerHeight;
            redraw();
        }
    })();

    </script>
</body> 
</html>

青い境界線は、サイズ変更キャンバスの端を示しており、常にウィンドウの端に沿っており、4辺すべてに表示されています。これは、上記の他の回答の一部には当てはまりませんでした。それが役に立てば幸い。

— クレイグ・モリソン
ソース
この答えは私の問題を解決しました。これはoverflow: hidden、display: blockこれを正しく機能させるために欠けていたものです。
— Deathicon 2018
1
リンクが壊れている
— Nic Sc​​ozzaro、
22

基本的には、onresizeイベントをボディにバインドする必要があります。イベントをキャッチしたら、window.innerWidthとwindow.innerHeightを使用してキャンバスのサイズを変更するだけです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Canvas Resize</title>

    <script type="text/javascript">
        function resize_canvas(){
            canvas = document.getElementById("canvas");
            if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }

            if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }
        }
    </script>
</head>

<body onresize="resize_canvas()">
        <canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>
— エクイマン
ソース
1
あなただけのイベントリスナーを使用することができます。
— David Corbin
これにはマージンがあり、スクロールバーが表示されます。さらに、何かを行う前に画面のサイズを変更する必要があります。
— ArtOfWarfare 2016年
キャンバスがビューポートより大きい場合（ビューポートを狭くしたり短くした場合）はどうなりますか？このソリューションはそれを処理していないようです。
— Lars Gyrup Brink Nielsen 2016
@ArtOfWarfareの元の質問では、スタイルについて何も触れられていません。ただし、CSSでスタイルを設定し、必要に応じてマージンを削除してスクロールバーを非表示にすることができます。そして、単純に `<body onload =" resize_canvas（） ">`を追加して、ページをロードしてからキャンバスのサイズを変更することができます。
— エクイマン2016
@LayZee元の質問saya bout は、ビューポートではなく、ページに合わせてキャンバスをスケーリングします。それは別の質問になる可能性があります。
— エクイマン2016
19

ブラウザクライアントの寸法に基づいてキャンバス座標空間の幅と高さを設定するには、ブラウザのサイズが変更されるたびにサイズ変更と再描画を行う必要があります。

それほど複雑ではない解決策は、JavaScript変数で描画可能な寸法を維持することですが、キャンバスの寸法はscreen.width、screen.heightの寸法に基づいて設定します。CSSを使用して適合：

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
}

ブラウザウィンドウは通常、画面自体よりも大きくなることはありません（画面解像度が誤って報告される場合を除きます。これは、一致しないデュアルモニターで発生する可能性があるためです）。そのため、背景は表示されず、ピクセルの比率は変化しません。CSSを使用してキャンバスをスケーリングしない限り、キャンバスのピクセルは画面解像度に正比例します。

— ジャージーボーイ
ソース
7
CSSでキャンバスを再スケーリングするのは面倒です。少なくともChromeとSafariでは、マウス/タッチイベントの位置はキャンバスピクセルの位置と1対1で対応しないため、座標系を変換する必要があります。
— jerseyboy、2011
14

純粋なCSSの上記@jerseyboyの溶液に加えるアプローチ。
Firefox（v29でテスト済み）、Chrome（v34でテスト済み）、Internet Explorer（v11でテスト済み）で動作します。

<!DOCTYPE html>
<html>
    <head>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        canvas {
            background-color: #ccc;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
        }
    </script>
</body>
</html>

例へのリンク：http : //temporaer.net/open/so/140502_canvas-fit-to-window.html

@jerseyboyがコメントで述べているように、注意してください：

CSSでキャンバスを再スケーリングするのは面倒です。少なくともChromeとSafariでは、マウス/タッチイベントの位置はキャンバスピクセルの位置と1対1で対応しないため、座標系を変換する必要があります。

— フォルカーE.
ソース
5
CSSはキャンバスを引き伸ばすため、レンダリングされた画像は引き伸ばされます。これは、キャンバスのサイズ変更に比べて良くありません。少し調整するだけで、クレイグの答えが最もよく機能します。
— Nayan 2015
親の幅に基づいてキャンバスを100％にするので、このソリューションが好きです。
— Maihan Nijat
9 
function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);
— ペトル
ソース
ニース、比率が重要なとき
— sarkiroka
8

キャンバスで画像データを自動的に拡大する必要がない場合（James Blackの答えはそれですが、見栄えがよくありません）、自分でサイズを変更して画像を再描画する必要があります。キャンバスの中央揃え

— ニコライ
ソース
4

divがウェブページを完全に埋めた場合、そのdivを埋めることができるため、divを埋めるキャンバスを用意できます。

パーセンテージを使用するためにcssを使用する必要がある場合があるので、これは興味深いかもしれませんが、使用しているブラウザーと、仕様にどの程度一致しているかによって異なります。http： //www.whatwg.org/ specs / web-apps / current-work / multipage / the-canvas-element.html＃the-canvas-element

canvas要素の固有の寸法は座標空間のサイズに等しく、数値はCSSピクセルで解釈されます。ただし、要素はスタイルシートによって任意にサイズ変更できます。レンダリング中、このレイアウトサイズに合わせて画像が拡大縮小されます。

divのoffsetWidthと高さを取得するか、ウィンドウの高さ/幅を取得してピクセル値として設定する必要がある場合があります。

— ジェームス・ブラック
ソース
3

CSS

body { margin: 0; } 
canvas { display: block; }

JavaScript

window.addEventListener("load", function()
{
    var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
    var context = canvas.getContext('2d');

    function draw()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); 
        context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height); 
        context.stroke();
    }
    function resize()
    {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        draw();
    }
    window.addEventListener("resize", resize);
    resize();
});
— マーティン・ワンケ
ソース
3

アスペクト比の保持に関心があり、純粋なCSSでそれを行う場合（アスペクト比が指定されている場合）、次のようなことができます。キーがあるpadding-bottomに::contentサイズの要素containerの要素を。これは100%、デフォルトである親の幅に相対的なサイズになります。ここで指定する比率は、canvas要素のサイズの比率と一致する必要があります。

// Javascript

var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');

context.fillStyle = '#ff0000';
context.fillRect(500, 200, 200, 200);

context.fillStyle = '#000000';
context.font = '30px serif';
context.fillText('This is some text that should not be distorted, just scaled', 10, 40);
/*CSS*/

.container {
  position: relative; 
  background-color: green;
}

.container::after {
  content: ' ';
  display: block;
  padding: 0 0 50%;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

canvas {
  width: 100%;
  height: 100%;
}
<!-- HTML -->

<div class=container>
  <div class=wrapper>
    <canvas width=1200 height=600></canvas>  
  </div>
</div>
スニペットを展開

— mrmcgreg
ソース
2

jQueryを使用すると、ウィンドウのサイズ変更を追跡し、jQueryを使用してキャンバスの幅を変更することもできます。

そんな感じ

$( window ).resize(function() {
 		$("#myCanvas").width($( window ).width())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
スニペットを展開

— ラファエルアンドラーデ
ソース
1 
(function() {

    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width:  window.innerWidth
        };
    };

    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        $('#myCanvas').width(viewportSize.width).height(viewportSize.height);
        $('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
    };

    // run on load
    updateSizes();

    // handle window resizing
    $(window).on('resize', function() {
        updateSizes();
    });

}());
— ローカー
ソース
0

これは私たちが正確に何をすべきかだと思います：http : //www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

function resizeGame() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }

    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';

    var gameCanvas = document.getElementById('gameCanvas');
    gameCanvas.width = newWidth;
    gameCanvas.height = newHeight;
}

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);
— アービンド・バードワージ
ソース
-2

私はsketch.jsを使用しているので、キャンバスに対してinitコマンドを実行した後、jqueryを使用して幅と高さを変更します。ディメンションは親要素に基づいています。

$（ '＃DrawCanvas'）。sketch（）。attr（ 'height'、$（ '＃DrawCanvas'）。parent（）。height（））。attr（ 'width'、$（ '＃DrawCanvas'）。parent （）。幅（））;

— moeiscool
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.