可resize的canvas（JQuery UI）

根据此页面，任何DOM元素都可以resize： http ： //jqueryui.com/demos/resizable/

但是，似乎这对CANVAS元素不起作用。 可能？

Answer 1

Canvas有两种类型的resize行为：

• 调整内容拉伸的位置以适应canvas的新尺寸
• 调整canvas增大或缩小时内容保持静态的位置

这是一个展示两种“resize”类型的页面： http ： //xavi.co/static/so-resizable-canvas.html

如果您想要第一种类型的大小调整（拉伸内容），则将canvas放入容器div并使用CSS将canvas的width和height设置为100％。 这是代码的样子：

 /* The CSS */ #stretch { height: 100px; width: 200px; } #stretch canvas { width: 100%; height: 100%; }  
 // The JavaScript $("#stretch").resizable(); 

第二种resize（静态内容）是一个两步过程。 首先，您必须调整canvas元素的width和height属性。 不幸的是，这样做会清除canvas，因此您必须重新绘制其所有内容。 以下是执行此操作的一些代码：

 /* The CSS */ #resize { height: 100px; width: 200px; }  
 // The JavaScript $("#resize").resizable({ stop: function(event, ui) { $("canvas", this).each(function() { $(this).attr({ width: ui.size.width, height: ui.size.height }); // Adjusting the width or height attribute clears the canvas of // its contents, so you are forced to redraw. reDraw(this); }); } }); 

目前，当用户停止调整窗口小部件的大小时，上面的代码会重新绘制canvas的内容。 可以在resize时重新绘制canvas，但是resize事件会经常发生并且重新绘制是昂贵的操作 – 请谨慎使用。

Answer 2

在canvas坐标系统上有一个有趣的怪癖，关于使用它：

 #stretch canvas { width: 100%; height: 100%; } 

（来自上面的例子）

您必须使用这些CSS规则，因为您无法在canvas的width / height属性中指定％。 但是当你尝试使用这些规则绘制对象时，你会发现你会得到意想不到的结果 – 绘制的对象看起来被压扁了。 这是上面的CSS，带有canvas边框……

  /* The CSS */ #stretch { width: 200px; height: 100px; } #stretch canvas { border:1px solid red; width: 100%; height: 100%; } 

canvas绘制为正确的大小，边框规则正确实现。 蓝色矩形，在其他地方的代码中添加，应该填充canvas周围20px填充，但这没有发生：

要解决此问题，请确保您还为canvas元素指定了宽度和高度（在HTML或带有setAttribute的javascript中）：

 canvas.setAttribute('width', '200'); canvas.setAttribute('height', '100'); 

要么

现在，当我刷新页面时，我得到了我的预期：

这种“双重检查”将确保使用正确的坐标系统绘制canvas，并且仍然允许通过CSS规则调整canvas大小。 如果这是一个错误，我相信它会在适当的时候修复。

这只是提供修复，但您可以在此处阅读更多内容

Answer 3

那么为什么不在canvas元素之前应用div，并调整该元素的大小，并在它停止时在canvas中应用宽度和高度然后重绘canvas。