如何通過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>