如何动态缩放 HTML5 <canvas> 元素？答案

【问题标题】：How do I dynamically scale the HTML5 <canvas> element?如何动态缩放 HTML5 <canvas> 元素？
【发布时间】：2012-08-10 16:35:18
【问题描述】：

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

分享任何提示。

谢谢

【问题讨论】：

看答案stackoverflow.com/questions/331052/…

标签： html html5-canvas

【解决方案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 个属性 width 和 height，它们都是 unsigned long。

使用 css3 也可以设置属性

resize:both;

【讨论】：