如何使画布响应

Question

我用bootstrap.我希望用户能够选择画布大小,同时保持设计屏幕在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/

Answer 1

改变宽度并不难.只需width从标记中删除该属性并添加width: 100%;css即可#canvas

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

改变高度有点困难:你需要javascript.我使用jQuery因为我更舒服.

您需要height从canvas标记中删除该属性并添加此脚本:

  <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/

编辑:

回答你的第二个问题.你需要javascript

0)首先,我将你的#border id改成了一个类,因为对于html页面内的元素,id必须是唯一的(你不能有2个具有相同id的标签)

.border{
  border: solid 1px black;
}

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

1)更改了HTML以在需要时添加ID,两个输入和一个用于设置值的按钮

<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并且中心div,但如果您使用bootstrap,则无法帮助.然而,这不是响应意味着什么.一个真正响应的网站将调整其大小到用户屏幕,以保持您想要的布局,无需任何外部输入,让用户设置任何可能破坏您的布局的大小并不意味着建立响应式网站.

Answer 2

您可以通过3个简单的步骤获得响应式画布:

1. 从您的.删除width和height属性<canvas>.

   <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;
   

Answer 3

object-fit CSS 属性设置被替换元素（例如 img 或视频）的内容应如何调整大小以适合其容器。

神奇的是，对象拟合也适用于画布元素。不需要 JavaScript，画布不会拉伸，自动按比例填充。

canvas {
    width: 100%;
    object-fit: contain;
}

Answer 4

这似乎工作:

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

Answer 5

<div class="outer">
 <canvas id="canvas"></canvas>
</div>    

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

#canvas {
 position: absolute;
 width: 100%;
 height: 100%;
}

Answer 6

用 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);
  })

}

它会为你做所有的工作

为什么我们不设置width或height通过 css 或样式？因为它会拉伸你的画布而不是让它变成预期的尺寸