如何通过 JavaScript 动态更改画布的样式大小？ [复制]

Question

画布的大小（宽高）可以改变，但画布的样式大小不能动态改变。

canvas = document.getElementById('test_fabric');
ctx = this.canvas.getContext('2d');
canvas.style.width = 1000;  // does not work.
canvas.style.height = 260;  // does not work.
canvas.width = 100;  // works.
canvas.height = 100;  // works.

canvas.width 和 canvas.height 都可以正常工作，但是 canvas.style.width 和 canvas.style.height 都不起作用。

就我而言，画布的样式大小只能通过 css 文件或画布的内联样式来更改。

canvas#test_fabric {
  width:400px;
  height:400px;
  background:gold;
}

或

<div><canvas id="test_fabric" width="200" height="200" 
style="width:200px; height:200px"></canvas></div>

注意：当内联样式存在时，css文件失效。

通过 JavaScript 动态改变画布样式大小的方法是什么？

Answer 1

样式属性的宽度和高度需要测量其值，而 html 属性的宽度和高度不需要。因此，您需要在代码中明确设置px, em or % 等：

canvas = document.getElementById('test_fabric');
ctx = canvas.getContext('2d');
canvas.style.width = '1000px'; // explicitly setting its unit 'px'
canvas.style.height = '260px';

没有单位的style.width/height是css的无效规则。

Answer 2

我使用了 jQuery，它使用 css 方法进行高度和宽度设置：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#test_fabric").css({
      "border-color": "#C1E0FF",
      "border-width": "1px",
      "border-style": "solid",
      "height": "500px",
      "width": "500px"
    });
  });
</script>
<div class="col-md-12">
  <div><canvas id="test_fabric" width="200" height="200"></canvas></div>
</div>