如何通过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的无效规则.