css - 如何使 Canvas 响应

Question

我使用 Bootstrap 。我希望用户能够选择 Canvas 大小，同时让设计屏幕在 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>

如何将 Canvas 的大小限制为 div 的大小？

我不知道是否有必要使用 JavaScript。

---

编辑

应该考虑到宽度和高度值是由用户输入的，并且 Canvas 的大小必须与 div 成比例

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

Answer 1

您可以通过 3 个简短的步骤获得响应式 Canvas :

1. 删除 width和 height来自 <canvas> 的属性.

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

2. 使用 CSS，设置 width你的 Canvas 到100% .

   #responsive-canvas {
     width: 100%;
   }
   

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

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