在画布上放大和缩小

Question

我使用HTML5 canvas元素编写了一个paint应用程序。

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

我该怎么做？

Answer 1

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

您可以通过缩放整个上下文来完成此操作，如ctx.scale(2,2)中所示，然后以更大的比例重绘所有内容。绘制的几个东西，如路径和文本，将优雅地扩展。要做到这一点，你需要保持对迄今为止绘制的所有内容的良好记录。

另一种方法是拍摄整个画布并将其绘制回自身。这需要一个临时画布，因为操作实际上是：绘制到临时画布，清除主画面，绘制回主缩放。

另一种方法是使用CSS变换仅仅缩放画布本身，这将使图像模糊（缩放！），但不需要更改画布上已有的任何像素。