html - 如何动态缩放 HTML5元素？

Question

我想通过在角落拖动来调整画布元素的大小。

分享任何提示。

谢谢

Answer 1

可以通过使用数字分配宽度和高度属性来更改大小：

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

至少它对我有用。确保您没有指定字符串（例如，“2cm”、“3in”或“2.5px”），并且不要弄乱样式。

实际上这是一个公开的知识——你可以在 HTML canvas 规范中阅读所有关于它的信息——它非常小而且信息量非常大。这是整个 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;