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

风格属性＆＃39;宽度和高度需要测量其值，而html属性＆＃39;宽度和高度不需要。因此，您需要在代码中明确设置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

我使用过使用css方法进行高度和宽度设置的jquery

 <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>

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

2 个答案: