如何動態縮放HTML5 <canvas>元素？

Question

我想通過在角落拖動來調整畫布元素的大小。

分享任何提示。

感謝

Answer 1

可以通過指定的寬度和高度，以改變大小屬性中使用的數字：

canvasNode.width = 200; // in pixels 
canvasNode.height = 100; // in pixels 

至少它爲我工作。確保不分配字符串（例如「2cm」，「3in」或「2.5px」），並且不要混淆樣式。

實際上，這是一個公開可用的知識 - 您可以在HTML畫布規範中閱讀所有關於它的內容 - 它非常小且信息非常豐富。這是整個DOM接口：

interface HTMLCanvasElement : HTMLElement { 
      attribute unsigned long width; 
      attribute unsigned long height; 

    DOMString toDataURL(); 
    DOMString toDataURL(in DOMString type, [Variadic] in any args); 

    DOMObject getContext(in DOMString contextId); 
}; 

正如你可以看到它定義了兩個屬性，寬度和高度，並且兩者都是無符號長。

用CSS3，你也可以做到這一點設置屬性

resize:both;