javascript - 如何正确选择 Canvas 宽度？

Question

我正在使用以下代码(根据 this answer )来制作响应式 Canvas :

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
ctx.font = '52px verdana';
var text = 'Sample text';
var textWidth = ctx.measureText(text).width;
ctx.fillText(text, 50, 50);

canvas {
  width: 100%;
  height: auto;
}

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <canvas id="canvas" width="800">
        Sorry, your browser doesn't support the &lt;canvas&gt; element.
      </canvas>
    </div>
  </div>
</div>

它看起来不太好，因为实际的 Canvas 元素大小不是 800，而是 1140(在我的浏览器中)。看起来我应该以某种方式检测窗口大小并分配正确的 Canvas 大小值。我应该怎么做？我正在使用最新的 Twitter Bootstrap 库。

Answer 1

不要使用css样式

ctx.canvas.width  = window.innerWidth || document.body.clientWidth;