如何通过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 /身高没有单位是CSS规则无效。

Answer 2

我已经使用的是使用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>