【发布时间】：2011-08-25 23:03:49
【问题描述】：
我使用 HTML5 画布元素编写了一个绘图应用程序。
现在我想给用户一个在绘画时放大和缩小的选项。
我该怎么做？
【问题讨论】：
-
您是如何实现您的绘画应用程序的？您将有哪些数据可用于以更大或更小的缩放比例重绘画布？如果您只想使现有像素更大，请使用 CSS 对其进行缩放。
标签： html canvas zooming html5-canvas
【发布时间】：2011-08-25 23:03:49
【问题描述】：
有几种方法。这真的取决于你在寻找什么。
您可以通过缩放整个上下文来做到这一点，如ctx.scale(2,2)，然后以更大的比例重新绘制所有内容。绘制的一些东西，如路径和文本，将优雅地缩放。要做到这一点，您需要很好地跟踪到目前为止绘制的所有内容。
另一种方法是获取整个画布并将其绘制回自身。这需要一个临时画布，因为操作实际上是：绘制到临时画布，清除主画布，绘制回主缩放。
另一种方法是使用 CSS 转换来仅缩放画布本身，这会使图像变得模糊（它已缩放！），但不需要更改画布上已有的任何像素。
【讨论】：
-
只是想在每次转换后添加（例如缩放），新情况是默认的。我的意思是，在设置
(2, 2)之后执行ctx.scale(0.5, 0.5)实际上会执行(2 * 0.5, 2 * 0.5)，因此将其设置为(2, 2)，然后设置为(0.5, 0.5)与最初的相比不会缩小实际画布，而是将其重置为以前的大小。