如何使画布响应

Question

我使用引导程序。我希望用户能够选择画布大小，同时保持设计屏幕在 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/

原文由 Gislef 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

改变宽度并不难。只需从标签中删除 width 属性并在 width: 100%; #canvas

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

改变高度有点困难：你需要 javascript。我使用 jQuery 是因为我更习惯。

您需要从画布标签中删除 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/

编辑：

回答你的第二个问题。你需要 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()));

1. 设置宽度和高度表格的值

$("#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，但如果您使用引导程序，这将无济于事。然而，这不是响应的意思。一个真正响应式的网站会根据用户屏幕调整其大小，以保持您想要的布局，而无需任何外部输入，让用户设置任何可能破坏您的布局的大小并不意味着制作一个响应式网站。

原文由 valepu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

1. 使用 CSS，将画布的 width 设置为 100% 。

    #responsive-canvas {
     width: 100%;
   }

1. 使用 JavaScript，将高度设置为宽度的某个比例。

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

原文由 Faheel 发布，翻译遵循 CC BY-SA 4.0 许可协议