動態修改大小的畫布HTML5

Question

我正在創建一個應用程序，以便在畫布中創建思維導圖，現在我遇到了元素大小調整的問題。最初我有這個：

<div id="lienzo"> 

      <canvas id="canvas2" width="1000" height="1000"> 

       This text is displayed if your browser does not support HTML5 Canvas. 

      </canvas> 

     </div> 

但任何時候我想改變畫布的大小，即改變元素畫布的寬度和高度。

我曾嘗試刪除畫布：

$('canvas').remove(); 

，然後再創建新元素的畫布：

$("<canvas/>",{id:'canvas2'}).appendTo('#lienzo'); 
$('canvas').width(500); 
$('canvas').height(500); 

後來我這樣做我重畫在畫布中的元素，但該元素看起來是像素化

當然，在新的畫布中我不能選擇元素。

我試圖直接改變畫布的尺寸，但我有同樣的問題。

解釋完所有問題後，問題是，如何在不更改畫布中的項目的情況下即時更改Canvas的大小。任何想法？

感謝您的時間

Answer 1

這是因爲jQuery的.width()和.height()方法改變與CSS元素的大小，這相當於縮放它，它不會改變canvas元素內任何東西。如果要更改畫布顯示的像素數，則需要設置畫布元素的.width和.height屬性。試試這個：

$('#canvas2')[0].width = 500; 
$('#canvas2')[0].height = 500;