web-dev-qa-db-ja.com

キャンバスをレスポンシブにする方法

ブートストラップを使用します。ユーザーがデザイン画面をdiv内でレスポンシブに保ちながら、キャンバスのサイズを選択できるようにしたいと思います。

<div class="row">
  <div class="col-xs-2 col-sm-2" id="border">content left</div>
  <div class="col-xs-6 col-sm-6" id="border">
    Width <input type="number" class="form-control"><br>
  Height <input type="number" class="form-control"><br>
  canvas
  <canvas id="canvas" width="500" height="300">  
  </canvas>

  </div>
  <div class="col-xs-2 col-sm-2" id="border">content right</div>

キャンバスのサイズをdivのサイズに制限するにはどうすればよいですか？

JavaScriptを使用する必要があるかどうかはわかりません。

編集

幅と高さの値はユーザーが入力し、キャンバスはサイズに比例したdivである必要があることを考慮に入れる必要があります

https://jsfiddle.net/1a11p3ng/2/

csshtml5canvasresponsive-design
23
Gislef

幅を変えることはそれほど難しくありません。タグからwidth属性を削除し、width: 100%;のc​​ssに#canvasを追加するだけです

#canvas{
  border: solid 1px blue;  
  width: 100%;
}

高さの変更は少し難しくなります。javascriptが必要です。私はjQueryを使いました。

canvasタグからheight属性を削除して、このスクリプトを追加する必要があります。

  <script>
  function resize(){    
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
  }
  $(document).ready(function(){
    resize();
    $(window).on("resize", function(){                      
        resize();
    });
  });
  </script>

このフィドルを見ることができます： https://jsfiddle.net/1a11p3ng/3/

編集：

2番目の質問に答えるため。 JavaScriptが必要です

0）まず、＃border idをクラスに変更しました。これは、idがhtmlページ内の要素に対して一意である必要があるためです（同じidの2つのタグは使用できません）

.border{
  border: solid 1px black;
}

#canvas{
  border: solid 1px blue;  
  width: 100%;
}

1）HTMLを変更して、必要に応じてIDを追加し、2つの入力と値を設定するボタン

<div class="row">
  <div class="col-xs-2 col-sm-2 border">content left</div>
  <div class="col-xs-6 col-sm-6 border" id="main-content">
    <div class="row">
      <div class="col-xs-6">
        Width <input id="w-input" type="number" class="form-control">
      </div>
      <div class="col-xs-6">
        Height <input id="h-input" type="number" class="form-control">
      </div>
      <div class="col-xs-12 text-right" style="padding: 3px;">
        <button id="set-size" class="btn btn-primary">Set</button>
      </div> 
    </div>
    canvas
    <canvas id="canvas"></canvas>

  </div>
  <div class="col-xs-2 col-sm-2 border">content right</div>
</div>

2）キャンバス内に収まるようにキャンバスの高さと幅を設定します

$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));

3）幅と高さのフォームの値を設定します

$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());

4）最後に、ボタンをクリックするたびに、キャンバスの幅と高さを設定された値に設定します。幅の値がコンテナの幅よりも大きい場合、代わりにキャンバスのサイズがコンテナの幅に変更されます（そうでない場合、レイアウトが崩れます）

    $("#set-size").click(function(){
        $("#canvas").outerHeight($("#h-input").val());
        $("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width()));
    });

ここで完全な例を参照してください https://jsfiddle.net/1a11p3ng/7/

更新2：

幅を完全に制御するには、これを使用できます：

<div class="container-fluid">
<div class="row">
  <div class="col-xs-2 border">content left</div>
  <div class="col-xs-8 border" id="main-content">
    <div class="row">
      <div class="col-xs-6">
        Width <input id="w-input" type="number" class="form-control">
      </div>
      <div class="col-xs-6">
        Height <input id="h-input" type="number" class="form-control">
      </div>
      <div class="col-xs-12 text-right" style="padding: 3px;">
        <button id="set-size" class="btn btn-primary">Set</button>
      </div> 
    </div>
      canvas
    <canvas id="canvas">

    </canvas>

  </div>
  <div class="col-xs-2 border">content right</div>
</div>
</div>
  <script>
   $(document).ready(function(){
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
    $("#h-input").val($("#canvas").outerHeight());
    $("#w-input").val($("#canvas").outerWidth());
    $("#set-size").click(function(){
        $("#canvas").outerHeight($("#h-input").val());
      $("#main-content").width($("#w-input").val());
      $("#canvas").outerWidth($("#main-content").width());
    });
   });
  </script>

https://jsfiddle.net/1a11p3ng/8/

左側のコンテンツと右側のコンテンツの列は上に移動し、幅が大きすぎると中央のdivを愛しますが、これはブートストラップを使用している場合は仕方がありません。ただし、これはレスポンシブの意味ではありません。真にレスポンシブなサイトは、ユーザーの画面に合わせてサイズを調整して、外部入力なしで意図したとおりにレイアウトを維持します。

18
valepu

3つの短い簡単な手順でレスポンシブキャンバスを作成できます。

  1. <canvas>からwidthおよびheight属性を削除します。

    <canvas id="responsive-canvas"></canvas>

  2. CSSを使用して、キャンバスのwidthを100%に設定します。

    #responsive-canvas {
  width: 100%;
}

  3. JavaScriptを使用して、高さを幅のある比率に設定します。

    var canvas = document.getElementById('responsive-canvas');
var heightRatio = 1.5;
canvas.height = canvas.width * heightRatio;
11
Faheel Ahmad

これは動作しているようです：

#canvas{
  border: solid 1px blue; 
  width:100%;
}
5
TheGrum
<div class="outer">
 <canvas id="canvas"></canvas>
</div>    

.outer {
 position: relative;
 width: 100%;
 padding-bottom: 100%;
}

#canvas {
 position: absolute;
 width: 100%;
 height: 100%;
}
5
Michael Sherris Caley

受け入れられた回答をjqueryで拡張する

キャンバスを追加する？にしたい場合は、このjquery.eachが答えます

responsiveCanvas(); //first init
$(window).resize(function(){
  responsiveCanvas(); //every resizing
  stage.update(); //update the canvas, stage is object of easeljs

});
function responsiveCanvas(target){
  $(canvas).each(function(e){

    var parentWidth = $(this).parent().outerWidth();
    var parentHeight =  $(this).parent().outerHeight();
    $(this).attr('width', parentWidth);
    $(this).attr('height', parentHeight);
    console.log(parentWidth);
  })

}

それはあなたのためにすべての仕事をします

cssまたはスタイルを介してwidthまたはheightを設定しないのはなぜですか？期待したサイズにする代わりにキャンバスを引き伸ばすからです

4
david valentino

vhおよびvwユニットを使用して、最新のブラウザーでこれを行うより良い方法があります。

vhはビューポートの高さです。

したがって、次のようなものを試すことができます。

<style>
canvas {
  border: solid 2px purple;
  background-color: green;
  width: 100%;
  height: 80vh;
}
</style>

これにより、アスペクト比が歪められます。

それぞれに同じ単位を使用して、アスペクト比を維持できます。アスペクト比が2：1の例を次に示します。

<style>
canvas {
  width: 40vh;
  height: 80vh;
}
</style>
0
Michael Cole