如何动态缩放HTML5 <canvas>元素？</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);
};

正如您所看到的，它定义了2个属性的宽度和高度，并且它们都是无符号长的。

使用css3也可以设置属性

resize:both;