在画布上放大和缩小

Question

我使用HTML5画布元素编写了一个绘画应用程序。

现在我想给用户一个在绘画时放大和缩小的选项。

我该怎么做呢？

Answer 1

有几种方法。这真的取决于你在寻找什么。

您可以通过缩放整个上下文来实现这一点，就像在ctx.scale(2,2)中一样，然后以更大的比例重新绘制所有内容。几个绘制的东西，如路径和文本，将优雅地缩放。要做到这一点，您需要很好地跟踪到目前为止绘制的所有内容。

另一种方法是将整个画布拉回到原来的位置。这需要一个临时画布，因为操作实际上是:绘制到临时画布，清除main，绘制回主缩放。

另一种方法是使用CSS变换来仅缩放画布本身，这将使图像变得模糊(缩放！)但是不需要改变画布上已经存在的任何像素。